Изогнутая секция с использованием пути клипа css с динамикой c высота - PullRequest
Новая
       21

Изогнутая секция с использованием пути клипа css с динамикой c высота

0 голосов
/ 14 апреля 2020

Я работаю над изогнутым сечением с динамической высотой c, я пробовал использовать свойство clip-path CSS. но когда я увеличиваю контент на этой кривой, требуется больше места, и между блоками появляется пробел. Я ищу решение, которое будет работать с динамика c высота . Пожалуйста, помогите в этом с динамической c высотой содержимого.

Я пробовал это с использованием многоугольника клипа-пути

Также пробовал с svg как https://jaketrent.com/post/create-bezier-curve-clip-path/

Но проблема остается той же

Пожалуйста, смотрите изображение ниже для ссылок. enter image description here enter image description here

Заранее спасибо 

  .module {
        position: relative;
        overflow: hidden;
        background-color: #f1ebe6;
        min-height: 20.75rem;
        -webkit-clip-path: ellipse(135% 77% at 0% 23%);
        clip-path: ellipse(135% 77% at 0% 23%);
        padding: 60px 30px 150px;
        position: relative;
        z-index: 1;
      }
      .module1 {
        background: #D2CAB7;
        padding-top: 250px;
        margin-top: -180px;
        position: relative;
        z-index: 0;
      }
<div class="module">
    	<div class="container">
    		<h1>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the </h1>
    	</div>
    </div>
    <div class="module module1">
    	<div class="container">
    		<h1>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the </h1>
    	</div>
    </div>

1 Ответ

0 голосов
/ 14 апреля 2020

Это можно сделать только с фоном: 

.container {
  overflow: auto;
  padding-bottom: 150px;
  background: 
    bottom left/  /* position */
    105% 150px    /* width = 105%  height = padding */
    no-repeat;
}

.first {
  background-image: radial-gradient(farthest-side at top left, #f1ebe6 99.6%, #D2CAB7 100%);
  background-color: #f1ebe6;
}

.second {
  background-image: radial-gradient(farthest-side at top left, #D2CAB7 99.6%, #fff 100%);
  background-color: #D2CAB7;
}
<div class="container first">
  <h1>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the </h1>
</div>
<div class="container second">
  <h1>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the </h1>
</div>
...