[分享]css不用多个正方形画扇形

在CSS中，常常会遇到需要画扇形的情况。一般的做法是用多个正方形组合成一个扇形，但这种方式存在一些缺陷，比如维护不易、代码粘贴时容易混乱等。接下来，我们介绍一种新的方法，只使用CSS就能轻松画出扇形，...

在CSS中，常常会遇到需要画扇形的情况。一般的做法是用多个正方形组合成一个扇形，但这种方式存在一些缺陷，比如维护不易、代码粘贴时容易混乱等。接下来，我们介绍一种新的方法，只使用CSS就能轻松画出扇形，而不需要使用多个正方形。

.rounded {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: linear-gradient(to left, transparent 50%, red 0),
              linear-gradient(90deg, red 50%, transparent 0);
  background-size: 50% 100%, 50% 100%;
  background-repeat: no-repeat;
} 

我们先来解释一下代码中的一些属性：

• border-radius: 50%;：让元素变成圆形。
• background: linear-gradient(to left, transparent 50%, red 0), linear-gradient(90deg, red 50%, transparent 0);：这个属性使用两个线性渐变函数，一个是从右到左的线性渐变，另一个是从上到下的线性渐变。
• background-size: 50% 100%, 50% 100%;：这个属性定义渐变背景的大小。50%表示只占据元素的一半，也就是画出扇形的一半。
• background-repeat: no-repeat;：这个属性禁止渐变背景重复。

通过以上属性的组合使用，我们就能够轻松地画出一个扇形了，而且代码也比较简单，易于维护。