html css3写一个圆环 缺少一角

html-css015

html css3写一个圆环 缺少一角,第1张

我用两个div写的实现楼主所说效果

.div1 {

width:100px

height:100px

background-color:transparent

border:4px solid red

border-radius:60px

margin-top:20px

}

.div2 {

width:60px

height:60px

background-color:#fff

z-index:1

border-radius:45px

position:absolute

top:0

left:80px

}

还有一个是用HTML5的canvas标签,不过得用JS

给你写个例子 <span style="width:0px height:0px line-height:0px font-size:0px border:10px  transparent dashed border-left:10px solid red "></span>

手写的 实现效果是 一个红色三角 如果有错 你就老实点把每个边样式定义一遍。border-left:10px  transparent dashed依此类推 只要将你想要写成三角的边变成10px solid red就可以了