html - 如何创建应用了背景图像的倾斜 div？

Question

我正在尝试制作一个带有背景图片的倾斜 div。 HERE是我要实现的目标的屏幕截图。

我一直使用 css 三 Angular 形制作倾斜的 div。然而，我发现这种技术在这种情况下很麻烦，因为它是 2 个独立的部分，图片无法连接。

截至目前，在我的代码中，我有一个 div，其背景图像应用了一个 before 元素，如下所示:

#booking-form:before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -320px;
    border-top: 726px solid transparent;
    border-right: 320px solid $secondary;
}

这就是我正在寻找的三 Angular 形，但是如果我向三 Angular 形添加图像，它会填充整个 css 之前，看起来像 this :

但我需要它看起来像 original .

有什么建议吗？谢谢!

Answer 1

只需使用具有适当 Angular 渐变背景的全宽 div。

没有转换，没有边界。

body {
  text-align: center;
}
.content {
  height: 150px;
  padding: 20px 0;
  background: linear-gradient(-65deg, rgba(0, 0, 255, 0.5) 65%, transparent 65%);
  display: flex;
}
div {
  background-image: url(http://www.fillmurray.com/460/300);
}
form {
  width: 50%;
  background: rgba(255, 255, 255, 0.85);
  margin-left: auto;
  margin-right: 1em;
}

<div>
  <div class="content">
    <form action=""></form>
  </div>
</div>