Добрый день всем. Вопрос: как при помощи css круг сделать под любой экран? width, height и border-radius в процентах дают круг на одних экранах и эллипс на других.
2 ответа
Ширину с высотой нужно делать одинаковыми, тогда всё должно быть норм.
circle {
display: inline-block;
border-radius: 100%;
}
.half_w {
width: 50vw;
height: 50vw;
}
.tenth_h {
width: 10vh;
height: 10vh;
}
.red {
background-color: red;
}
<circle class="tenth_h red"></circle>
<circle class="half_w red"></circle>
Через псевдоэлемент-распорку с padding-top: 100%
.
.circle {
width: 100%;
border-radius: 50%;
background-color: lightblue;
}
.circle:before {
content:'';
padding-top: 100%;
display: inline-block;
}
<div class=circle></div>