График на CSS. Возможно ли?

#css

Добрый день! Подскажите, пожалуйста, возможно ли выполнить такой график на css?

    

Ответы

Ответ 1

Если все же на 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;
}

  

  
    

      

    

    

      

    

    

      

    


  
  

    
1
    
2
    
3
  
  





Но уже лучше тогда использовать для такого препроцессоры. Мой код на CODEPEN.

А еще лучше не мудрить, а рисовать все это svg.


Ответ 2

Есть разные варианты но дорабатывать самому придётся

Часть круга так:

.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

Потом увеличить количество кругов

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