如何用四个季度创建圆 [英] How to create circle with four quarters

问题描述

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

Is it possible to create a circle using only CSS with four quarters in it?

我无法超越：

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

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

推荐答案

容易...使用边框和旋转。

Easily...using borders and a rotation.

.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>

-元素（无需旋转），只需渐变即可。

Or perhaps with pseudo-elements (no rotation needed), just gradients.

*,
*::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>

这篇关于如何用四个季度创建圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！