CSS: Fill Circle с 2, 3 или 4 цветами

Возможно ли заполнить круг 2 или 3 цветами, чтобы каждая секция имела равную площадь?CSS: Fill Circle с 2, 3 или 4 цветами

Я знаю, что вы можете сделать 4: http://jsfiddle.net/k8Jj9/

div { 
border-radius: 50px; 
border-right-color: blue; 
border-top-color: yellow; 
border-bottom-color: red; 
border-left-color: green; 
border-width: 50px; 
border-style: solid; 
height: 0px; 
width: 0px; 

/* To ratate */ 
-webkit-transform: rotate(45deg); 
-moz-transform: rotate(45deg); 
-o-transform: rotate(45deg); 
-ms-transform: rotate(45deg); 
transform: rotate(45deg);

}

Но мне очень интересно, как если есть такой подход, который может сделать 2, 3 и 4 (мы надеемся, в рамках одного подхода/или набор кодирования).

Редактировать: Эти круги будут нарисованы D3, поэтому я не уверен, что это изменит ответы/предложения, особенно в отношении SVG.

источник

2017-02-22 homersheineken

Вы ищете конические градиенты, которые еще не существуют. Используйте SVG. –

Попробуйте найти CSS-диаграммы. - http://stackoverflow.com/search?q=css+pie+charts –

Ну, если вы хотите только 2 цвета, вы можете просто установить верхний и правый цвета как один и тот же цвет, а также слева и внизу (http: // jsfiddle. net/k8Jj9/133 /), однако, чтобы сделать его разделенным на треть, возможно, невозможно таким образом, интересный вопрос tho –

Чтобы создать круг с тремя цветами, начните с скрипки, которую вы имеете, и наложите на нее еще два круга с разными оборотами. Два других круга могут быть сделаны с использованием элементов div :: before и :: after.

div { 
 
    border-radius: 50px; 
 
    border-right-color: red; 
 
    border-top-color: yellow; 
 
    border-bottom-color: red; 
 
    border-left-color: green; 
 
    border-width: 50px; 
 
    border-style: solid; 
 
    height: 0px; 
 
    width: 0px; 
 
    position: relative; 
 
    /* To ratate */ 
 
    -webkit-transform: rotate(45deg); 
 
    -moz-transform: rotate(45deg); 
 
    -o-transform: rotate(45deg); 
 
    -ms-transform: rotate(45deg); 
 
    transform: rotate(45deg); 
 
} 
 

 
div::before { 
 
    display: block; 
 
    content: ''; 
 
    position: absolute; 
 
    left: -50px; 
 
    top: -50px; 
 
    border-radius: 50px; 
 
    border-right-color: transparent; 
 
    border-top-color: yellow; 
 
    border-bottom-color: transparent; 
 
    border-left-color: transparent; 
 
    border-width: 50px; 
 
    border-style: solid; 
 
    height: 0px; 
 
    width: 0px; 
 
    /* To ratate */ 
 
    -webkit-transform: rotate(30deg); 
 
    -moz-transform: rotate(30deg); 
 
    -o-transform: rotate(30deg); 
 
    -ms-transform: rotate(30deg); 
 
    transform: rotate(30deg); 
 
} 
 

 
div::after { 
 
    display: block; 
 
    content: ''; 
 
    position: absolute; 
 
    left: -50px; 
 
    top: -50px; 
 
    border-radius: 50px; 
 
    border-right-color: transparent; 
 
    border-top-color: transparent; 
 
    border-bottom-color: transparent; 
 
    border-left-color: green; 
 
    border-width: 50px; 
 
    border-style: solid; 
 
    height: 0px; 
 
    width: 0px; 
 
    /* To ratate */ 
 
    -webkit-transform: rotate(-30deg); 
 
    -moz-transform: rotate(-30deg); 
 
    -o-transform: rotate(-30deg); 
 
    -ms-transform: rotate(-30deg); 
 
    transform: rotate(-30deg); 
 
}

<div></div>

источник

2017-02-22 17:34:26

2 и 4 цвета уже обсуждались в вопросе и в комментариях. Я не уверен, что вы можете сделать более 4 равных частей, так как вы ограничены использованием 90 ° сегментов. –

ответ

Смежные вопросы