css实现扇形代码 |css 颜色值命名

.sector{
width: 0;
height: 0;
border-top: 100px solid #f00;
border-right: 100px solid transparent;
border-bottom: 100px solid transparent;
border-left: 100px solid transparent;
border-radius: 100px 0 0 0;
}

大家使用CSS的border属性来实现扇形。首先要给扇形一个宽度和高度，同时将右、下两条边隐藏，这会形成一个直角三角形。接下来设置样式，将直角三角形的左边和上边的边框颜色设置为透明，它们就不会显示出来。再将直角三角形的上边框颜色设置为红色，同时将其它三边的边框颜色设置为透明，大家就得到了一个扇形。最后将扇形的角度控制在0~90度之间。

.sector{
width: 0;
height: 0;
border-top: 100px solid #f00;
border-right: 100px solid transparent;
border-bottom: 100px solid transparent;
border-left: 100px solid transparent;
border-radius: 100px 0 0 0;
transform: rotate(45deg);
}

使用CSS3的transform属性可以使扇形旋转，让它们更加立体化，同时大家将扇形的角度设置为45度，它就变成了一个从水平方向顺时针旋转45度的扇形。

这就是大家使用CSS实现扇形的方法，它虽然表现简单，却可以灵活运用到各种不同的设计中。相信大家在设计中也能运用到这种技巧，让自己的设计更加优美！