html - 如何使 div 的底部像这张图片一样尖

Question

我正在努力使我的背景图像的形状像下面所附的图像一样。

html:

<div id="hero-banner">

</div>

scss:

div#hero-banner {
    margin-top: -60px;
    max-height: 600px;
    height: 60vh;
    min-width: 100%;
    background: url('http://finedininglovers.cdn.crosscast-system.com/ImageAlbum/6830/original_001.jpg') no-repeat, linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5));
    background: url('http://finedininglovers.cdn.crosscast-system.com/ImageAlbum/6830/original_001.jpg') no-repeat, webkit-linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5));
    background: url('http://finedininglovers.cdn.crosscast-system.com/ImageAlbum/6830/original_001.jpg') no-repeat, moz-linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5));
    background-blend-mode: overlay;
    background-size: cover;
}

喜欢下面这张图

Answer 1

您可以使用 clip-path将元素剪裁成所需的形状。 This tool摆弄以获得您想要的确切形状真是太棒了。

div#hero-banner {
  margin-top: -60px;
  max-height: 600px;
  height: 60vh;
  min-width: 100%;
  background: url('http://finedininglovers.cdn.crosscast-system.com/ImageAlbum/6830/original_001.jpg') no-repeat, linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
  background: url('http://finedininglovers.cdn.crosscast-system.com/ImageAlbum/6830/original_001.jpg') no-repeat, webkit-linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
  background: url('http://finedininglovers.cdn.crosscast-system.com/ImageAlbum/6830/original_001.jpg') no-repeat, moz-linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
  background-blend-mode: overlay;
  background-size: cover;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 18% 100%, 0 90%);
  clip-path: polygon(0 0, 100% 0, 100% 90%, 18% 100%, 0 90%);
}

<div id="hero-banner">

</div>