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/