css - 如何创建四个四分之一的圆

Question

<分区>

Answer 1

轻松...使用边框和旋转。

.circle {
  margin: 1em auto;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  border-width: 20px;
  border-style: solid;
  border-color: red green blue yellow;
  transform: rotate(45deg);
}

<div class="circle"></div>

你甚至可以有彩色的空心圆圈。

.circle {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  border-width: 20px;
  border-style: solid;
  border-color: red green blue yellow;
  transform: rotate(45deg);
}
.wide {
  width: 100px;
  height: 100px;
}

<div class="circle wide"></div>

或者可能使用伪元素(不需要旋转)，只是渐变。

*,
*::before,
*::after {
  box-sizing: border-box;
}
.circle {
  width: 100px;
  height: 100px;
  margin: 1em auto;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  border: 6px solid pink; /* borders on it too */
}
.circle::before,
.circle::after {
  content: '';
  position: absolute;
  height: 100%;
  width: 50%;
  top: 0;
}
.circle::before {
  left: 0;
  background: linear-gradient(green, green 50%, yellow 50%);
}
.circle::after {
  left: 50%;
  background: linear-gradient(red, red 50%, blue 50%);
}

<div class="circle"></div>