# 用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>
# 圆？半圆？椭圆？
div {
width: 100px;
height: 100px;
background-color: red;
margin-top: 20px;
}
.box1 { /* 圆 */
/* border-radius: 50%; */
border-radius: 50px;
}
.box2 { /* 半圆 */
height: 50px;
border-radius: 50px 50px 0 0;
}
.box3 { /* 椭圆 */
height: 50px;
border-radius: 50px/25px; /* x轴/y轴 */
}
HTML代码：
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
阅读全文
