如何通过 css 实现一个扇形
也就是在三角形基础上加一个边框 border-radius:100px;
方法一
让盒子的宽高为 0,给他任意 3 条边框设置透明并为没有设置透明的边框设置背景色,给他设置边框 border-radius:100px;
css
.box {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid orange;
border-left: 50px solid transparent;
border-radius: 100px;
}方法二
让盒子的宽高为 0,让上边 border 和右边 border 是同一颜色,让下边 border 和左边 border 是透明,给他设置边框 border-radius:100px;
css
.box {
width: 0;
height: 0;
border-top: 50px solid orange;
border-right: 50px solid orange;
border-bottom: 50px solid transparent;
border-left: 50px solid transparent;
border-radius: 100px;
}