CSS:四种颜色的圆圈,只有一个div

Question

是否可以使用纯CSS创建一个具有四种不同颜色(每季度一个)的圆圈？我想要像这四个圈子中的一个:

[不幸的是,我链接的图像不再存在了.请查看答案以了解我之后的影响]

我可以想象使用具有四个div和border-radius的解决方案,但是这可能只使用一个div和一些花哨的css3吗？

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/

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