css把圆环分成四等份 有四种不同颜色

在CSS中，要将一个圆环分成四等份并赋予四种不同的颜色，可以通过使用CSS的伪元素和边框属性来实现。以下是一个简单的示例：

1. 首先，创建一个相对定位的容器，设置其宽度和高度为相同的值，以形成一个正方形。
2. 然后，为该容器设置一个边框半径（border-radius），使其宽度和高度的50%值相同，这样边框就形成了一个圆形。
3. 使用伪元素`::before`和`::after`，并将它们的宽度和高度设置为0，这样它们就是不可见的。
4. 对容器及其伪元素分别设置四种颜色，并将它们的边框宽度设置为50%，这样边框就会沿着容器的中心线将圆形分成四等份。
5. 最后，确保容器的边框宽度为0，以隐藏实际的边框，只显示伪元素的边框部分。

以下是一个具体的CSS示例：

.ring {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: transparent; /* 可以设置一个背景色 */
}

.ring::before, .ring::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 100px solid; /* 边框宽度的一半 */
}

.ring::before {
  border-color: red transparent transparent transparent;
  top: 0;
  left: 0;
}

.ring::after {
  border-color: transparent blue transparent transparent;
  top: 0;
  left: 100px;
}

.ring span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 100px solid transparent; /* 边框宽度的一半 */
  border-left-color: green;
  border-radius: 50%;
}

.ring span::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 100px solid transparent; /* 边框宽度的一半 */
  border-top-color: yellow;
  border-radius: 50%;
}

使用这种方法，你可以创建一个圆环，它被分成了四个四分之一圆环，每个部分有不同的颜色。