如何在这张图片中使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让你想要的确切形状是惊人的。

＆＃13;

＆＃13;

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%);
}

＆＃13;

<div id="hero-banner">

</div>

＆＃13;

＆＃13;

＆＃13;