如何用四分之三创建圆圈

Question

是否可以仅使用四分之三的CSS创建一个圆圈？

我不能超越:

.circle {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  colour: red;
}

<div class="circle">&nbsp;</div>

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>