# 用CSS实现各种形状
# 如何画扇形？
.sector {
width: 0;
height: 0;
border: 100px solid red;
border-color: red transparent transparent transparent;
border-radius: 50%;
}
/*或者*/
.sector {
width: 100px;
height: 100px;
border: 100px solid transparent;
border-top-color: red;
box-sizing: border-box; /* 这步很重要 */
border-radius: 50%;
}
@前端进阶之旅: 代码已经复制到剪贴板
HTML代码：
<div class="sector"></div>
@前端进阶之旅: 代码已经复制到剪贴板
# 如何画三角形？
.triangle {
width: 0;
height: 0;
border: 100px solid red;
border-color: red transparent transparent transparent;
}
/*或者*/
.triangle {
width: 100px;
height: 100px;
border: 100px solid transparent;
border-top-color: red;
box-sizing: border-box;
}
@前端进阶之旅: 代码已经复制到剪贴板
HTML代码：
<div class="triangle"></div>
