Как создать контейнер с закругленным дном, но с сохранением радиуса кривизны? - PullRequest
Новая
       39

Как создать контейнер с закругленным дном, но с сохранением радиуса кривизны?

0 голосов
/ 01 июня 2018

Я собираюсь создать макет с накоплением разделов, в котором каждый раздел имеет изогнутое дно, которое накладывается сверху на раздел ниже: (см. Изображение)

enter image description here

Я пытался сделать это с помощью маски svg, но кривизна сечения меняется в зависимости от высоты контейнера, а это не то, что я ищу.

Попытка сделатьэто с: after и: before псевдоэлементами, но мне также нужно иметь возможность размещать фоновое изображение в разделе, и при таком подходе фоновое изображение разрывается в изогнутом разделе.

Так что я ищулюбой тип руководства по этому вопросу.Спасибо!

1 Ответ

0 голосов
/ 01 июня 2018

Вы можете заставить вас переполнять основной контейнер, тогда вы сможете использовать border-radius, а также рассмотреть background-image: 

.container {
  max-width: 300px;
  margin:auto;
  overflow: hidden;
  display:flex;
  flex-direction:column-reverse;
  align-items:center;
}
.container .box {
   flex-shrink:0;
   width:120%;
   box-sizing:border-box;
   padding:0 20%;
   height:100px;
   border-radius:0 0 100% 100%;
}

.container .box:not(:last-child) {
  margin-top:-25px;
  padding-top:25px;
}
<div class="container">
  <div class="box" style="background:red;">Some content</div>
  <div class="box" style="background:blue;">Some content</div>
  <div class="box" style="background:green;">Some content</div>
</div>
...