CSS：四色圆形，仅使用一个div

Question

是否可能使用纯CSS创建一个由四种不同颜色组成的圆形（每个季度一种颜色）？ 我想要像这四个圆中的其中之一:

[很遗憾，我链接的图片已经不存在了，请查看答案以了解我想要的效果]

我可以想象使用四个带有border-radius的div来实现解决方案，但是是否可以仅使用一个div和一些花哨的css3来实现呢？

- knub

---

我认为“一个div中有4个div”的布局没有任何问题。 - mishik

仅将该图像作为div背景有什么问题吗？ - user2568107

我看不出来怎么做。这里有四个div和一个容器 - jsFiddle - Pete

@mishik: 我们这样说吧：如果没有其他办法，我会使用4个div。但是，如果有的话，我更喜欢只用一个div的更加干净的方法。 user2568107: 无法缩放。 - knub

@knub，我理解你的意思了。我误解了你的意思，以为你想用一个div获取四个四色圆形。 - mishik

Answer 1

既然您列出了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);
}

http://jsfiddle.net/k8Jj9/

- skyline3000

Answer 2

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;
}

演示

并且使用边框半径：

演示2

备用方法

.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，两者都是半透明的。 一旦定义了该类，您可以轻松地将其应用于不同的颜色元素，从而获得相同的效果，无需努力。

演示3

- vals

---

注意：对于此解决方案，请始终使用偶数宽度/高度，否则会出现白线。 - knub

谢谢，您能提供一个参考来更好地理解解决方案的第一部分吗？ - Mustafa Alfar

Answer 3

如何看待这个例子：只需一个div。 http://jsbin.com/uletik/1/edit

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;
}

- user1721135