CSS：四种颜色的圆圈，只有一个div

是否可以使用纯CSS创建具有四种不同颜色（每个季度一种）的圆？ 我想要四个圆圈中的一个：

[不幸的是，我链接的图像已不存在。请查看答案以了解我所追求的效果]

我可以想象使用一个具有四个div和边界半径的解决方案，但这是否可能只使用一个div和一些奇特的css3？

这个怎么样：

只有一个分区

div {
  height:100px;
  width:100px;
  border-radius:100px;
 background: -webkit-linear-gradient(left, grey, grey 50%, blue 50%, blue);
  overflow:hidden;
  position:relative;
}
div:after {
  content:"";
  height:50px;
  background-color:red;
  width:50px;
  display:block;
}
div:before {
  content:"";
  background-color:green;
  height:50px;
  width:50px;
  display:block;
  right:0;
  position:absolute;
}

CSS将是：

div {
    width: 200px;
    height: 200px;
    background: linear-gradient(45deg, blue, blue 100%), linear-gradient(135deg, green, green), linear-gradient(225deg, yellow, yellow) , linear-gradient(225deg, red, red);
    background-size: 50% 50%;
    background-position: 0% 0%, 0% 100%, 100% 0%, 100% 100%;
    background-repeat: no-repeat;
}

边界半径为：

替代方法

.quarters {
    width: 101px;
    height: 101px;
    border-radius: 50%;
    position: relative;
}

.quarters:after {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),                   
                linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6));
    background-size: 50% 100%, 100% 50%;
    background-position: 100% 0%, 0% 100%;
    background-repeat: no-repeat;
  
}

#red {
    background-color: red;
}
#blue {
    background-color: blue;
}
#green {
    background-color: green;
}
#yellow {
    background-color: yellow;
}

在OP图像行中，圆具有相同颜色的不同阴影，可以定义一个类，该类设置为覆盖在基本div上，两者都是半透明的。 一旦定义了该类，您就可以轻松地将其应用于不同的颜色元素，不费吹灰之力就能获得相同的效果

---

因为您列出了CSS3，所以可以只使用边框和旋转变换来“修复”对齐：

div {
    border-radius: 50px;
    border-style: solid;
    border-width: 50px;
    border-bottom-color: red;
    border-left-color: green;
    border-right-color: blue;
    border-top-color: yellow;
    height: 0px;
    width: 0px;

    /* To ratate */
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

---

我可以在assembler上编写富web应用程序吗？当然，但是为什么？为什么我要用CSS？动物可繁殖性。为什么我只需要一个元素？避免混乱。或者你的意思是什么？我看不出“一个分区内有4个分区”布局有任何问题。仅仅将该图像作为分区背景有什么错？？？我看不出怎么做。这里有4个div和一个容器-注意：此解决方案始终使用均匀的宽度/高度：否则会出现白线。谢谢，您能为我提供一份参考资料，让我更了解解决方案的第一部分吗？