Shapes
Shapes to use as background cover elements.
Curved
<!-- Shape Container -->
<div class="shape-container">
<img class="img-fluid" src="../assets/img/documentation/img7.jpg" alt="图片描述内容">
<!-- Shape -->
<div class="shape shape-bottom zi-1">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 1920 100.1">
<path fill="#fff" d="M0,0c0,0,934.4,93.4,1920,0v100.1H0L0,0z"></path>
</svg>
</div>
<!-- End Shape -->
</div>
<!-- End Shape Container -->
Angles
Use .shape-top
for top positioning
<!-- Shape Container -->
<div class="shape-container">
<img class="img-fluid" src="../assets/img/documentation/img7.jpg" alt="图片描述内容">
<div class="shape shape-top zi-1">
<svg width="3000" height="600" viewBox="0 0 3000 600" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0H3000V600L0 0Z" fill="#fff"/>
</svg>
</div>
</div>
<!-- End Shape Container -->
<!-- Shape Container -->
<div class="shape-container">
<img class="img-fluid" src="../assets/img/documentation/img7.jpg" alt="图片描述内容">
<div class="shape shape-top zi-1">
<svg width="3000" height="600" viewBox="0 0 3000 600" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3000 0H0V600L3000 0Z" fill="#fff"/>
</svg>
</div>
</div>
<!-- End Shape Container -->
Use .shape-bottom
for bottom positioning
<!-- Shape Container -->
<div class="shape-container">
<img class="img-fluid" src="../assets/img/documentation/img7.jpg" alt="图片描述内容">
<div class="shape shape-bottom zi-1">
<svg width="3000" height="600" viewBox="0 0 3000 600" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 600H3000V0L0 600Z" fill="#fff"/>
</svg>
</div>
</div>
<!-- End Shape Container -->
<!-- Shape Container -->
<div class="shape-container">
<img class="img-fluid" src="../assets/img/documentation/img7.jpg" alt="图片描述内容">
<div class="shape shape-bottom zi-1">
<svg width="3000" height="600" viewBox="0 0 3000 600" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3000 600H0V0L3000 600Z" fill="#fff"/>
</svg>
</div>
</div>
<!-- End Shape Container -->