这个CSS怎么写？带斜边

html-css021

这个CSS怎么写？带斜边,第1张

代码如下：

html:

<div id="div3">

<div class="arrow-top"></div>

</div>

css:

#div3 {

position: relative

width: 300px

height: 200px

background-color: yellow

}

.arrow-top {

position: absolute

top: -50px

left: -50px /*移动距离为小三角的宽高*/

width: 0px

height: 0px

border-width: 50px /*小三角的高度*/

border-style: solid

border-color: transparent transparent #C73837 transparent /*朝上的小三角*/

transform: rotate(-45deg) /*将小三角旋转到你想要的角度*/

}

你可以根据自己的需要进行微调

div有斜角的话，建议使用css3的新特性，比js的要方便省力，将要旋转的div增加如下属性：

transform:rotate(7deg)

7deg指的是旋转角度，前边数字取值范围为0-360度，按需求使用即可

有三种方法可以实现CSS圆角。第一、直接写CSS代码：border-radius

例如：border-radius:10px第二、四个圆角贴图；制作四个圆角的图片，然后用css定义

第三、直接制作整个矩形背景。总归而言，第一种方式最简单，只要一行代码。