Как правильно сверстать блок адаптивно?

190

07 декабря 2021, 20:00

Как правильно сверстать такой блок, чтоб он хорошо отображался при адаптивности?

Answer 1

Самое простое - на svg:

<svg style="width: 100%; max-width: 400px; height: 100%; max-height: 400px;" viewBox="0 0 42 42" class="donut"> 
  <circle cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#dfe8ed" stroke-width="3"></circle> 
  <circle cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#30bae7" stroke-width="3" stroke-dasharray="90 10" stroke-dashoffset="25"></circle> 
  <text x="30%" y="58%" style="font-family: sans-serif; font-size: .7em">90</text> 
  <text x="60%" y="57%" style="font-family: sans-serif; font-size: .4em">%</text> 
</svg>

Answer 2

CSS вариант:

skill, skill:before, skill:after { 
  width: 100px; 
  height: 100px; 
  top: 0; 
  position: absolute; 
} 
 
skill { 
  background: radial-gradient(circle, #fff 40px, #eee 41px, #eee 48px, #fff 49px); 
} 
 
skill:before { 
  content: ''; 
  background: radial-gradient(circle, #fff 40px, #ade 41px, #ade 48px, #fff 49px); 
  clip-path: polygon(50px 50px, 50px 0, 100px 0, 100px 100px, 0 100px, 0 0, 10px 0); 
} 
 
skill:after { 
  content: '90%'; 
  font: 30px Arial; 
  line-height: 100px; 
  text-align: center; 
}