Сделал рамку в форме круга. И заполненность этого круга - это статистика. Повернул таблицу (transform: rotate(-45.0deg);). Конечно же логично, что и текст при этом повернулся. Как выровнить текст?
CSS
.skills h1 {
border-bottom: 10px solid #000;
padding-top: 100px;
}
.skills__stats {
max-width: 775px;
color: #1cb88b;
padding-top: 80px;
}
.circle__stats {
display: flex;
justify-content: space-between;
padding-bottom: 50px;
}
.circle__1,
.circle__2,
.circle__3,
.circle__4 {
width: 152px;
height: 152px;
border: 10px solid #1cb88b;
border-radius: 100%;
text-align: center;
padding-top: 7%;
font-size: 18px;
font-weight: 700;
}
.circle__1 {
border-top: #fff solid 10px;
transform: rotate(-45.0deg);
}
.circle__2 {
border: #fff solid 10px;
border-top-color: #1cb88b;
}
<section class="skills">
<div class="container">
<h1>Our <br> skills</h1>
<div class="skills__stats">
<div class="circle__stats">
<div class="circle__1">75</div>
<div class="circle__2">25</div>
<div class="circle__3">75</div>
<div class="circle__4">50</div>
</div>
</div>
</div>
</section>