CSS：圆有四种颜色，只有一个div [英] CSS: Circle with four colors and only one div

问题描述

是否可以使用纯CSS为四个不同颜色（每个季度一个）创建一个圆圈？
我想要这四个圈子之一：

Is it possible to create a circle with four different colors (one for each quarter) using pure CSS? I want something like one of these four circles:

点图标http://a4.mzstatic.com/us/r1000/092/Purple2 /v4/e4/2b/1a/e42b1aa7-c9c2-8fb6-ef10-90233e4a2333/mzl.lzjqqwlx.175x175-75.jpg

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

I can imagine using a solution with four divs and border-radius, but is this possible using only one div and some fancy css3?

推荐答案

你列出CSS3，你可以使用边框和旋转变换来修复对齐方式：

Since you listed CSS3, you could do this with just borders and a rotation transformation to "fix" the alignment:

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/

这篇关于CSS：圆有四种颜色，只有一个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！