web-dev-qa-db-fra.com

Segments dans un cercle en utilisant CSS3

Je sais que vous pouvez créer un cercle dans CSS3 en utilisant le hack de rayon de bordure. Mais est-il possible de leur faire des segments comme cette image? Y a-t-il un moyen de faire cela via HTML et CSS mais pas JS?

enter image description here

csscss3css-shapes
24
Games Brainiac

Oui, vous pouvez obtenir de telles coupes d'angles personnalisés à l'aide de l'une des deux méthodes suivantes:

  1. Si vous n'avez pas besoin que les tranches soient des éléments eux-mêmes, vous pouvez simplement le faire avec un élément et des gradients linéaires - voir ceci Roue arc-en-ciel le mois dernier.
  2. Si vous avez besoin que les tranches soient des éléments eux-mêmes, vous pouvez le faire en chaînant les transformations obliques et rotatives - voir ceci menu circulaire Je l’ai fait il ya quelque temps.

Pour # 2, voyez aussi ce très simplifié exemple je l'ai fait maintenant.

.pie {
  position: relative;
  margin: 1em auto;
  border: dashed 1px;
  padding: 0;
  width: 32em; height: 32em;
  border-radius: 50%;
  list-style: none;
}
.slice {
  overflow: hidden;
  position: absolute;
  top: 0; right: 0;
  width: 50%; height: 50%;
  transform-Origin: 0% 100%; 
}
.slice:first-child {
  transform: rotate(15deg) skewY(-22.5deg);
}
.slice-contents {
  position: absolute;
  left: -100%;
  width: 200%; height: 200%;
  border-radius: 50%;
  background: lightblue;
}
.slice:first-child .slice-contents {
  transform: skewY(22.5deg); /* unskew slice contents */
}
.slice:hover .slice-contents { background: Violet; } /* highlight on hover */
<ul class='pie'>
  <li class='slice'>
    <div class='slice-contents'></div>
  </li>
  <!-- you can add more slices here -->
<ul>

49
Ana

Oui, vous pouvez: http://jsfiddle.net/elias94xx/3rx7w/ , http://jsfiddle.net/elias94xx/3rx7w/2/

#chart {
  width: 0;
  height: 0;
  border-right: 60px solid purple;
  border-top: 60px solid transparent;
  border-left: 60px solid transparent;
  border-bottom: 60px solid transparent;
  border-radius: 60px;
  -moz-border-radius: 60px;
  -webkit-border-radius: 60px;
}
<div id="chart"></div>

.chart {
  position: absolute;
  width: 0;
  height: 0;
  border-radius: 60px;
  -moz-border-radius: 60px;
  -webkit-border-radius: 60px;
}

#chart1 {
  border-right: 60px solid red;
  border-top: 60px solid transparent;
  border-left: 60px solid transparent;
  border-bottom: 60px solid transparent;
}

#chart2 {
  border-right: 60px solid transparent;
  border-top: 60px solid green;
  border-left: 60px solid transparent;
  border-bottom: 60px solid transparent;
}

#chart3 {
  border-right: 60px solid transparent;
  border-top: 60px solid transparent;
  border-left: 60px solid blue;
  border-bottom: 60px solid transparent;
}

#chart4 {
  border-right: 60px solid transparent;
  border-top: 60px solid transparent;
  border-left: 60px solid transparent;
  border-bottom: 60px solid yellow;
}
<div id="chart1" class="chart"></div>
<div id="chart2" class="chart"></div>
<div id="chart3" class="chart"></div>
<div id="chart4" class="chart"></div>

Source: http://www.paulund.co.uk/how-to-create-different-shapes-in-css

4
user625860

Vous pouvez utiliser l'élément html li et certains css transform pour représenter chaque tranche du cercle.

La partie délicate est la transform. Dans ce cas, j'ai divisé le cercle en 5 tranches. Le calcul est le suivant. 360/5=72 -> rotate72+90=162 -> skewY

.sliceWrapper {
  position: relative;
  border: 1px solid black;
  padding: 0;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  list-style: none;
  overflow: hidden;
}

.slice {
  position: absolute;
  left: -100%;
  width: 200%;
  height: 200%;
}

li {
  overflow: hidden;
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 100%;
  transform-Origin: 0% 100%;
}

li:first-child {
  transform: rotate(0deg) skewY(162deg);
}

li:nth-child(2) {
  transform: rotate(72deg) skewY(162deg);
}

li:nth-child(3) {
  transform: rotate(144deg) skewY(162deg);
}

li:nth-child(4) {
  transform: rotate(216deg) skewY(162deg);
}

li:nth-child(5) {
  transform: rotate(288deg) skewY(162deg);
}

li:first-child .slice {
  background: green;
}

li:nth-child(2) .slice {
  background: tomato;
}

li:nth-child(3) .slice {
  background: aqua;
}

li:nth-child(4) .slice {
  background: yellow;
}

li:nth-child(5) .slice {
  background: blue;
}
<ul class="sliceWrapper">
  <li>
    <div class="slice"></div>
  </li>
  <li>
    <div class="slice"></div>
  </li>
  <li>
    <div class="slice"></div>
  </li>
  <li>
    <div class="slice"></div>
  </li>
  <li>
    <div class="slice"></div>
  </li>
</ul>

1
daniel.szaniszlo