This question has already been answered:
- How to make a circle divided into colors 4 answers
The goal is to write a pie chart in pure CSS. Is it possible to realize this? 
Lestalab Lestalab
588 2 15
Reported as a duplicate member of PashaPash ♦ 6 Sep '17 at 11:44 .
A similar question was asked earlier and an answer has already been received. If the answers provided are not exhaustive, please ask a new question .
- In order not to duplicate the answer - stackoverflow.com/questions/21205652/… - exactly your task (the best answer). It remains only to add labels, but with this, I think, easier. - Alexey Zadoyny
- There is already a similar note in Russian (but there’s a less complete example, so I didn’t give it) —stackoverflow.com/questions/676477/… - Aleksey Zadoyyny
- Thank you very much. Exactly what I needed. - Lestalab
|
2 answers
If you want to do it on html elements without svg, then you need to rotate the semicircular div in a container with overflow hidden - you’ll have a sector. The container itself must be rotated to the desired position. If necessary, you can arrange pointer-events so that you can direct on the sectors separately.
A code with explanations is in the next question .
Qwertiy ♦ Qwertiy
76.3k 17 74 201
|
there are errors here, there is no time to correct them, you understand the idea, then you will figure it out yourself ...
html, body { margin: 0; padding: 0; background: #272727 } #wrapper { overflow: hidden; position: relative; left: 10px; top: 10px; width: 200px; height: 200px; background-color: transparent; border: 1px solid red; border-radius: 50%; } /* */ .round_graphics { position: absolute; left: 0; top: 0; width: 200px; height: 200px; } .round_graphics:nth-child(1) { background-color: green; clip-path: polygon(25% 100%, 75% 100%, 50% 50%); transform: rotate(15deg); } .round_graphics:nth-child(2) { background-color: orange; clip-path: polygon(14% 100%, 75% 100%, 50% 50%); transform: rotate(90deg); } .round_graphics:nth-child(3) { background-color: blue; clip-path: polygon(25% 100%, 75% 100%, 50% 50%); transform: rotate(45deg); } .round_graphics:nth-child(4) { background-color: red; clip-path: polygon(25% 100%, 75% 100%, 50% 50%); transform: rotate(245deg); } .round_graphics:nth-child(5) { background-color: white; clip-path: polygon(25% 100%, 75% 100%, 50% 50%); transform: rotate(145deg); } <div id="wrapper"> <div class="round_graphics"></div> <div class="round_graphics"></div> <div class="round_graphics"></div> <div class="round_graphics"></div> <div class="round_graphics"></div> </div> 
Air air
10.6k five 21 52
- oneI realized the idea, this type of charts is not usable at all. - Lestalab
- explain? I do not understand ... more detail you can? - Air
- oneHere, segments are drawn by polygons, which in turn hide the parent “circle” with overflow: hidden; In such a case, how can I, for example, determine the size of a segment of a chart by 15%, for example, except by eye, and the calculations must be accurate - Lestalab
- deal with the clip-path ... and it will be clearer than necessary ... but as far as I know, this is the best option on css - Air
- in IE 11 does not work - Sergey Shuchkin
|