Добрый день! Подскажите, пожалуйста, возможно ли выполнить такой график на css?
Ответ
Если все же на 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.
Комментариев нет:
Отправить комментарий