0

Вопрос вроде простой, но поставил в тупик.

На макете резиновый блок с круглым низом, как сделать без js? (ширина и пропорции меняются!)

введите сюда описание изображения

4
  • через border-radius для низа
    – ArchDemon
    10 фев 2019 в 19:58
  • Снизу есть ответ с примером, можете посмотреть, почему это не сработает 10 фев 2019 в 20:08
  • При чем тут вообще js и при каких обстоятельствах меняются и о каких пропорциях идет речь?
    – Air
    10 фев 2019 в 21:04
  • Пропорции любые, нижняя часть круг. Через JS. можно получить ширину блока и выставить бордер-радиус равный половине. Вопрос, можно ли сделать это через css 11 фев 2019 в 5:19

2 ответа 2

1

div {
    background: #000;
    width: 200px;
    height: 300px;
    border-radius: 0 0 50vh 50vh;
}
<div></div>

нужному блоку просто border-radius: 0 0 50vh 50vh ;

5
  • 1
    Переместите код из codepen в текст ответа. А вообще автор уже разъяснил, что такой вариант ему не подходит
    – andreymal
    11 фев 2019 в 1:24
  • Andrey Ivasko, мистика какая-то) Почему это работает? vh - процент от высоты окна же? 11 фев 2019 в 13:08
  • Правильно! Автоматически подстройка под высоту) И не вытягивает. Вместе с бордер-радиусом дает магию 11 фев 2019 в 13:10
  • 1
    получится фигня, если высота экрана меньше половины ширины блока. Можно задать тупо border-radius: 0 0 500px 500px - чтобы радиус закругления заведомо был больше полуширины блока. Закругление при этом оной полуширины при рендеринге не превысит и будет все как надо. 11 фев 2019 в 13:49
  • Инквизитор, спасибо за дополнение, стало понятно в чем смысл. На всякий случай объясню тем, кто в поиске найдет и не понял - если border-radius двух соседних углов одинаков и превышает размер стороны элемента (не важно на сколько и в чем он задан) объединяющая их сторона закругляется по окружности с диаметром равному размеру стороны. 14 фев 2019 в 15:18
0

.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>

4
  • Border-radius учитывает и высоту тоже) Низ не круглый, к сожалению 10 фев 2019 в 20:07
  • Тут не все так очевидно( 10 фев 2019 в 20:07
  • 1
    @ЖеняВеденин обновил ответ
    – fanfer
    10 фев 2019 в 21:23
  • Спасибо большое, но вариант выше изящнее и больше подходит 14 фев 2019 в 15:18

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.