Good day! Tell me, please, is it possible to execute such a schedule on css? enter image description here

  • one
    Yes, such a schedule is possible to perform on css - Grundy

2 answers 2

If, however, on CSS :

*{ box-sizing: border-box; } .graph { position: relative; width: 200px; height: 400px; } .circle { position: relative; width: 200px; height: 400px; overflow: hidden; } .box { position: absolute; transform-origin: 50% 50%; } .item { height: inherit; border: 20px solid; } .count-list { list-style-type: none; padding: 0; margin: 0; } .count-list li { position: absolute; top: 0; right: -20px; font-family: sans-serif; } .count-list li:nth-of-type(1){ top: 0; color: gold; } .count-list li:nth-of-type(2){ top: 30px; color: orangered; } .count-list li:nth-of-type(3){ top: 60px; color: darkturquoise; } /* ------ 1 ------- */ .b-1 { top: 0; left: 0; width: 400px; height: 400px; transform: rotate(0deg); } .b-1 .item { width: 200px; border-color: gold; border-right: none; border-bottom-left-radius: 200px; border-top-left-radius: 200px; } /* ------ 2 ------- */ .b-2 { top: 30px; left: 30px; width: 340px; height: 340px; transform: rotate(30deg); } .b-2 .item { width: 170px; border-color: orangered; border-right: none; border-bottom-left-radius: 170px; border-top-left-radius: 170px; } /* ------ 3 ------- */ .b-3 { top: 60px; left: 60px; width: 280px; height: 280px; transform: rotate(60deg); } .b-3 .item { width: 140px; border-color: darkturquoise; border-right: none; border-bottom-left-radius: 140px; border-top-left-radius: 140px; } 
 <div class="graph"> <div class="circle"> <div class="box b-1"> <div class="item"></div> </div> <div class="box b-2"> <div class="item"></div> </div> <div class="box b-3"> <div class="item"></div> </div> </div> <ul class="count-list"> <li>1</li> <li>2</li> <li>3</li> </ul> </div>

But it is already better then to use preprocessors for such. My code is on CODEPEN .

And even better not to be wise, but to draw all this svg.

  • Helen you are inimitable, as always with me + - user33274
  • =) yes you are flattering))) - HamSter
  • Super! Everything is clear and accessible. Thank you - LADYX

There are different options but you will have to refine yourself

Part of a circle like this:

 .full-circle { background-color:#c06; height:150px; width:150px; -webkit-border-radius:75px; -moz-border-radius:75px;

...

http://jsfiddle.net/cardeo/8ku6T/

https://webdesign.tutsplus.com/tutorials/how-to-build-a-css-only-semi-circle-donut-chart--cms-26997

Then increase the number of laps

http://tutorial.webdesignershouse.com/2015/01/05/css-circles-tutorial-series/