div的波浪形状的底部没有固定div的高度

Question

我想将此div的底部部分设为

＆＃13;

＆＃13;

<div class="col-1 slider-cat-nav slick-initialized slick-slider slick-vertical" id="slider_categories">
  <div aria-live="polite" class="slick-list" style="height: 520px;"><div class="slick-track" role="listbox" style="opacity: 1; height: 1768px; transform: translate3d(0px, -520px, 0px);">
    <div class="slick-slide slick-current slick-active" data-slick-index="0" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide10" style="width: 42px;">
        <img class="svg cat-icons-op" id="digital_icon" src="img/icons/icon-d.svg">
    </div>
    <div class="slick-slide slick-active" data-slick-index="1" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide11" style="width: 42px;">
        <img class="svg cat-icons-op" id="inspire_icon" src="img/icons/icon-tools.svg">
    </div>
    <div class="slick-slide slick-active" data-slick-index="2" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide12" style="width: 42px;">
        <img class="svg cat-icons-op" id="perform_icon" src="img/icons/icon-search.svg">
    </div>
    <div class="slick-slide slick-active" data-slick-index="3" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide13" style="width: 42px;">
        <img class="svg cat-icons-op" id="automate_icon" src="img/icons/icon-rocket.svg">
    </div>
    <div class="slick-slide slick-active" data-slick-index="4" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide14" style="width: 42px;">
        <img class="svg cat-icons-op" id="develop_icon" src="img/icons/icon-ab.svg">
    </div>
  </div>
</div>

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我不想修复这个div的高度。

Answer 1

已编辑：运行代码段

.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

此链接可帮助您自己设计

Answer 2

目前唯一可以做到这种＆＃34;形状＆＃34;在css中只使用一个div元素是为该图像添加可重复的背景（可以使用上面提供的svg作为源）。

您更有可能需要添加适当的底部填充和box-sizing以保持高度。

另一种方法是使用底层绝对定位元素作为svg图像或画布。