Question

这是我想要实现的目标的图像......

我认为这可能是通过倾斜一个：伪后或者可能有大量的边界工作，但是它的内容是最重要的，而且背后的形象我真的很挣扎，任何想法都是欢迎。或者，如果真的太噩梦，

我知道有很多关于倾斜边缘的问题，但没有一个与此相同。

Answer 1

我要考虑的第一件事是这些元素如何叠加在一起，以及它们将如何在小型显示器上显示。从您的图片来看，似乎每个元素都包含4个元素，例如<h1> <p> <button>和<img>，如果您想将<img>推到其他人或他们的右侧，那么目前还不清楚。我建议在任何情况下将它们放入并且顺序是可以理解的，没有CSS使它们一致并且可以理解为小显示器并为每个显示器分配适当的背景颜色。然后，一旦你有房地产并排移动它们左右浮动（取决于你想要的位置）然后在适当的容器中为你的分隔器应用一个简单的背景图像。我可以根据您向我展示的内容提出最简单的HTML代码示例：

＆＃13;

<main>
  <section>
    <figure>
      <img src="drinks-image.jpg" alt="drinks image">
    </figure>
    <div>
      <h1>Drinks</h1>
      <p>drinks text goes here</p>
      <button>button</button>
    </div>
  </section>
  <section>
    <figure>
      <img src="bookig-image.jpg" alt="booking image">
    </figure>
    <div>
      <h1>Book Your Seat</h1>
      <p>booking text goes here</p>
      <button>button</button>
    </div>
  </section>
</main>

＆＃13;

我希望这可以帮助你，或者至少让你开始。我希望我能给你更多的信息，但我没有太多可以继续下去。有几种方法可以与许多版本的浏览器兼容。在任何情况下，您都希望利用背景颜色并仅在需要时添加背景图像。

Answer 2

下面的CSS会给你一个倾斜的边缘;使用Chrome，Firefox和IE11测试。

＆＃13;

.slanted-edge {
    position: absolute;
    display: inline-block;
    width: 0;
    height: 0;
    line-height: 0;
    border: 50px solid grey;
    border-right-color: transparent;
    border-bottom-color: transparent;
}

＆＃13;

要创建倾斜边缘，您需要采用0大小的形状并添加一个边距，该边框的大小是所需边缘高度的一半 - 在本例中，我想要一个100px高的形状，所以我使用了50px。

然后，您必须可视化连接相对角的两条对角线，大致类似于[x]，它将图像分成四个三角形。您可以通过将该边的border-color属性设置为透明来将每个三角形设置为透明。

为了实现您正在寻找的外观，您可能需要四列，中间的两个是倾斜的边缘，以及内容和内容。图像是外柱上的两个图像。当然，您可以在内容和图片上使用::after和::before来创建倾斜的边缘，但我还没有对其进行测试。

Answer 3

my solution

Figuring out how to get it responsive is up to you =)

为后面的图像创建50％列的倾斜边

3 个答案: