Вопрос вроде простой, но поставил в тупик.
На макете резиновый блок с круглым низом, как сделать без js? (ширина и пропорции меняются!)
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуdiv {
background: #000;
width: 200px;
height: 300px;
border-radius: 0 0 50vh 50vh;
}
<div></div>
нужному блоку просто border-radius: 0 0 50vh 50vh ;
border-radius: 0 0 500px 500px
- чтобы радиус закругления заведомо был больше полуширины блока. Закругление при этом оной полуширины при рендеринге не превысит и будет все как надо.
11 фев 2019 в 13:49
.wrap {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: flex-start;
}
.div {
background-color: #000;
position: relative;
margin: 0 10px;
}
.div:after {
content: '';
background-color: #000;
position: absolute;
left: 0;
top: 100%;
transform: translateY(-50%);
width: 100%;
border-radius: 50%;
padding-top: 100%;
}
.div-1 {
width: 50px;
height: 50px;
}
.div-2 {
width: 100px;
height: 200px;
}
.div-3 {
width: 150px;
height: 250px;
}
.div-4 {
width: 250px;
height: 350px;
}
<div class="wrap">
<div class="div div-1"></div>
<div class="div div-2"></div>
<div class="div div-3"></div>
<div class="div div-4"></div>
</div>
border-radius
для низаjs
и при каких обстоятельствах меняются и о каких пропорциях идет речь?