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

问题描述

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

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

解决方案

因为你列出了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; 
 
 / *批准* / 
 -webkit-transform：rotate（45deg）; 
 -moz-transform：rotate（45deg）; 
 -ms-transform：rotate（45deg）; 
 -o-transform：rotate（45deg）; 
 transform：rotate（45deg）; 
} 
  

http://jsfiddle.net/k8Jj9/

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:

I can imagine using a solution with four divs and border-radius, but is this possible using only one div and some fancy 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屋！