css3 扇形怎么做的

CSS3中非常有趣的一个特性就是可以使用它来制作扇形。

.circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: linear-gradient(90deg,#ff9f00 50%,transparent 50%),linear-gradient(90deg,#f3f3f3 50%,#ff9f00 50%);
  background-size: 100% 100%,100% 100%;
  background-position: 0 0,25px 25px;
  background-repeat: no-repeat;
}

上面的代码是制作一个扇形的最基本代码，其中要注意的是，首先需要设置一个宽高相等的圆形，然后使用border-radius将其变为一个圆形。

接着，我们需要设置扇形的渐变背景，具体来说，是两个线性渐变。第一个渐变从垂直方向的顶部开始，到底部结束，颜色分别为#ff9f00（橙色）和透明色，以此制作扇形的两个角度。第二个渐变则是将背景设置为橙色块和灰色块相间的格子背景，这里需要注意的是，这个渐变的起始位置需要进行相应的位置偏移，这里我们将它设置为25px。

最后，将前两个元素的background-size都设置为100% 100%，由于设置了两个背景，因此需要逗号隔开，同时将它们的background-position设置为0 0和25px 25px。最后一个要设置的是这两个背景的background-repeat，它需要设置为不重复，否则将会出现多个扇形。