Я пытаюсь заставить группу элементов сидеть в верхнем левом углу веб-страницы.Когда браузер работает на максимуме, элементы выглядят нормально.Но когда ширина браузера становится меньше ширины самого большого элемента (внешний круг 927 пикселей), появляется горизонтальная полоса прокрутки.Я хотел бы сделать так, чтобы элементы уменьшались, а горизонтальная полоса прокрутки не появлялась.Я мог изменить размеры всех отдельных элементов с помощью медиа-запросов, но я хотел знать, есть ли лучший способ сделать это.
Я попытался вставить группу в столбец начальной загрузки, но ничего не получилось.Я также попытался установить размеры элементов на vw (например, установка ширины и высоты внутреннего круга 20vw).Это работало до тех пор, пока я не начал изменять размеры браузера и элементы переместились со страницы.
HTML:
<div class="corner">
<div class="moon"></div>
<div class="inner-circle"></div>
<div class="mid-circle"></div>
<div class="outer-circle"></div>
</div>
CSS:
.moon{
position: absolute;
width: 240px;
height: 240px;
left: 170px;
top: -40px;
border-radius: 50%;
box-shadow: -80px 50px white;
}
.inner-circle {
position: absolute;
width: 635px;
height: 598px;
left: -134px;
top: -300px;
border-radius: 50%;
background:rgba(229, 227, 238, 0.5);
opacity: 0.4;
}
.mid-circle {
position: absolute;
width: 841px;
height: 795px;
left: -240px;
top: -400px;
border-radius: 50%;
background: rgba(229, 227, 238, 0.5);
opacity: 0.3;
}
.outer-circle {
position: absolute;
width: 927px;
height: 902px;
left: -230px;
top: -410px;
border-radius: 50%;
background: rgba(229, 227, 238, 0.5);
opacity: 0.2;
}