web-dev-qa-db-fra.com

Comment segmenter un cercle avec différentes couleurs en utilisant CSS

Je veux pouvoir dessiner un cercle avec un segment d'une autre couleur, j'aimerais que la quantité d'un segment couvert puisse être augmentée par incréments de 10% de 0% à 100%.

Tous les exemples sur Google sont tous des secteurs et non des segments.

Segments

Jusqu'à présent, c'est le meilleur que j'ai pu trouver:

div.outerClass {
    position: absolute;
    left: 10px;
    top: 10px;
    height: 2.5px;
    overflow: hidden;
    -ms-transform: rotate(270deg); /* IE 9 */
    -webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */
    transform: rotate(270deg);
}

div.innerClass {
    width: 10px;
    height: 10px;
    border: 5px solid green;
    border-radius: 36px;
}
<div class="outerClass">
    <div class="innerClass"></div>
</div>

0%, 50% et 100% Je peux tout faire.

htmlcsssvgcss-shapes
43
Greg

La solution multi-navigateur:

JSFiddle

.circle {
    border-radius: 50%;
    background: gray;
    width: 300px;
    height: 300px;
    overflow: hidden;
}
.segment {
    float: left;
    width: 10%;
    height: 100%;
}
    .segment_1 {
        background: red;
    }
    .segment_2 {
        background: green;
    }
    .segment_3 {
        background: yellow;
    }
    .segment_4 {
        background: blue;
    }
<div class="circle">
    <div class="segment segment_1"></div>
    <div class="segment segment_2"></div>
    <div class="segment segment_3"></div>
    <div class="segment segment_4"></div>
</div>
42
sergdenisov

Vous pouvez le faire en utilisant linear-gradient

.circle{
  position:absolute;
  width:80px;
  height:80px;
  border-radius:50%;
  background: linear-gradient(
    to right,
    yellow  0%, yellow 10%,
    orange 10%, orange 20%,
    yellow 20%, yellow 30%,
    orange 30%, orange 40%,
    yellow 40%, yellow 50%,
    orange 50%, orange 60%,
    yellow 60%, yellow 70%,
    orange 70%, orange 80%,
    yellow 80%, yellow 90%,
    orange 90%, orange 100%
  );
}
<div class="circle"></div>

sinon vous pouvez mettre 10 éléments enfants dans votre overflow:hidden cercle parent:

.circle{
  position:absolute;
  width:80px;
  height:80px;
  border-radius:50%;
  overflow:hidden;
}
.circle > span{
  width:10%;
  height:100%;
  float:left;
}

.circle > span:nth-child(1){ background: yellow;}
.circle > span:nth-child(2){ background: orange;}
.circle > span:nth-child(3){ background: blue;}
.circle > span:nth-child(4){ background: green;}
.circle > span:nth-child(5){ background: Fuchsia;}
.circle > span:nth-child(6){ background: orange;}
.circle > span:nth-child(7){ background: gold;}
.circle > span:nth-child(8){ background: tan;}
.circle > span:nth-child(9){ background: navy;}
.circle > span:nth-child(10){background: brown;}
<div class="circle">
  <span></span><span></span><span></span><span></span><span></span>
  <span></span><span></span><span></span><span></span><span></span>
</div>
49
Roko C. Buljan

BOÎTE OMBRE

Une autre approche pourrait être d'utiliser un seul élément et des ombres en boîte.

  • L'élément principal est un cercle (border-radius: 50%;) et a un rapport d'aspect de 1: 1.

  • Le pseudo-élément est positionné left: -100%;, ou juste à gauche de l'élément principal.

  • 10 ombres en boîte sont appliquées sur le pseudo-élément, avec différentes couleurs et différentes abscisses. J'ai mis les abscisses à 30 pixels, car 30 pixels correspondent à 10% de 300 pixels ...

  • 10% de largeur a été choisi car 10 bandes sont nécessaires.

div {
  height: 300px;
  width: 300px;
  border: 1px solid black;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
}
div:before {
  position: absolute;
  content: '';
  height: inherit;
  width: inherit;
  left: -100%;
  background: red;
  box-shadow: 
    30px 0 0 chocolate,
    60px 0 0 hotpink,
    90px 0 0 Indigo,
    120px 0 0 orangered,
    150px 0 0 gold,
    180px 0 0 deepskyblue,
    210px 0 0 springgreen,
    240px 0 0 darkslategray,
    270px 0 0 gold,
    300px 0 0 navy;
}
<div></div>
14
Max Payne

Une autre approche serait d'utiliser SVG. Les segments sont constitués de <rect /> éléments et ils sont coupés en cercle à l'aide de <clipPath/> élément:

svg{width:40%;display:block;margin:0 auto;}
use:hover{fill:#000;}
<svg viewBox="0 0 10 10">
  <defs>
    <clipPath id="circle">
      <circle cx="5" cy="5" r="5" />
    </clipPath>
    <rect id="seg" y="0" width="1" height="10" />
  </defs>  
  <g clip-path="url(#circle)">
    <use xlink:href="#seg" x="0" fill="pink"/>
    <use xlink:href="#seg" x="1" fill="green" />
    <use xlink:href="#seg" x="2" fill="orange" />
    <use xlink:href="#seg" x="3" fill="teal" />
    <use xlink:href="#seg" x="4" fill="tomato"/>
    <use xlink:href="#seg" x="5" fill="gold"/>
    <use xlink:href="#seg" x="6" fill="darkorange" />
    <use xlink:href="#seg" x="7" fill="pink" />
    <use xlink:href="#seg" x="8" fill="red" />
    <use xlink:href="#seg" x="9" fill="yellow" />
  </g>
</svg>
12
web-tiki