下部のdiv

Question

の高さを固定せず、私はこれの下の部分が、この形状

.shape { 
 
    height: 200px; 
 
    background: #e7ecf5; 
 
    position: relative; 
 
    width: 100%; 
 
}

<div class="shape"> 
 

 
</div>

をDIV私はの高さを修正したくないようにしたいですこのdiv。

Answer 1

現在のところ、1つのdiv要素だけを使用してこのような「シェイプ」をCSSで実行する唯一の方法は、その画像に繰り返し可能な背景を追加することです（上記のソースとして提供されたsvgを使用できます）。

高さを維持するには、適切なボトムパッドとbox-sizingを追加する必要があります。

もう1つのアプローチは、例えば、svgイメージまたはキャンバスである基本的な絶対配置要素を使用することです。

Answer 2

編集：このリンクは、あなたがそれを

を自分で設計するのに役立つかもしれスニペット

.shape { 
 
    height: 200px; 
 
    background: #e7ecf5; 
 
    position: relative; 
 
    width: 1080px; 
 
} 
 

 
.svg { 
 
    margin-top: -60px; 
 
} 
 

 
.svgpath { 
 
    fill: #e7ecf5 
 
}

<div class="shape"> 
 

 
</div> 
 
<svg class="svg" height="400" width="1080"> 
 
<path class="svgpath" d="M 0 100 Q 80 120 160 100 Q 250 90 330 100 Q 440 130 540 130 Q 640 130 750 100 Q 830 90 920 100 Q 1000 120 1080 100 Q 1080 75 1080 60 Q 540 60 0 60 Q 0 70 0 100 Z" /> 
 
</svg>

https://codepen.io/anthonydugois/pen/mewdyZ

を実行します