css三角形边框怎么制作拼接在一起的?

html-css033

css三角形边框怎么制作拼接在一起的?,第1张

这位网友你好,三角形边框只是利用了一个元素的边框,元素本身宽高都为0,把边框颜色设置为透明色,然后需要的一边设置为自己想要的颜色即可。

div{

  border:20px solid transparent

  border-left-color:#ff0000

}

例如上面就是一个向右的三角形。当然你可以可以利用左边框和下边框拼成一个大三角形,其他都类似。

使用纯css制作扇形图,合并起来形成饼图:

应该知道css3中引入了圆角属性(border-radius),一旦设置这个值,边框即会出现圆角。同样,我们对正方形设置圆角,即可得到饼状图

html:<div id="circle">11</div>

css:

#circle{

width:0

height:0

border-radius:100px

border-width:100px

border-style:solid

border-color: red blue green yellow

line-height:99em

overflow:hidden

cursor:pointer

margin: 30px auto

}

效果:

4.同样我们对其中三个边框设置透明色即可得到扇形

html:<div id="fan">11</div>

css:

#fan{

width:0

height:0

border-radius:100px

border-width:100px

border-style:solid

border-color:red transparent transparent transparent

line-height:99em

overflow:hidden

cursor:pointer

margin: 30px auto

}

效果: