Question

我正在处理倾斜的div，并且在处理堆叠/重叠方面存在问题。

我有3个div； -Div1具有简单的背景颜色且不偏斜 -Div2在顶部倾斜并且具有背景图像（背景颜色设置为与Div1相同） -Div3是div2的重复，但背景图像不同。

麻烦的是，div3的倾斜部分具有div1背景颜色-我希望它显示div2的背景图像。

这有意义吗？

This is what it looks like right now - i want to get rid of the red and show the image instead.

谢谢！

HTML和CSS

/* 8. Sections */
    section {
        width: 100%;
        height: 100vh;
      }
      
      /* Homepage - Hero */
      section.hero {
        position: relative;
        overflow: hidden;
        width: 100%;
        background-color: #E2004B;
      }
      
      /* Homepage - VWEAR */
      section.vwear {
        position: relative;
        overflow: hidden;
        width: 100vw;
        background-image: url("https://drive.google.com/uc?id=1oaThTzD6dpXolbB0OSxDMMTC52VF1A0f");
        background-size: cover;
        background-position: center;
      }
      
      section.vwear:before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        bottom: 100%;
        left: 0;
        transform: skewY(-3deg);
        transform-origin: right;
        background: #E2004B;
      }
      
      /* Homepage - VGEAR */
      section.vgear {
        position: relative;
        overflow: hidden;
        width: 100vw;
        background-image: url("https://drive.google.com/uc?id=1-WIqMPtFY1I6WyDYFnSyhvkYqVNqdR9o");
        background-size: cover;
        background-position: center;
      }
      
      section.vgear:before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        bottom: 100%;
        left: 0;
        transform: skewY(-3deg);
        transform-origin: right;
        background: #E2004B;
      }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="stacking_div_skew.css">
</head>
<body>
    HTML
<!-- start Hero Section-->
    <section class="hero" data-section-name="hero" id="hero">
        <div class="txt-container">
            <div class="hero-txt">BIG HEADLINE TEXT<br><br>SMALLER SUBTITLE</div>
        </div>
    </section>
    <!-- end Hero Section -->

    <!-- start V:WEAR Section-->
    <section class="vwear" data-section-name="vwear" id="vwear">
      <div class="txt-container">
        <div class="hero-txt">BIG HEADLINE TEXT<br><br>SMALLER SUBTITLE</div></div>
      </div>
    </section>
    <!-- end V:WEAR Section -->

    <!-- start V:GEAR Section-->
    <section class="vgear" data-section-name="vgear" id="vgear">
      <div class="txt-container">
        <div class="hero-txt">BIG HEADLINE TEXT<br><br>SMALLER SUBTITLE</div></div>
      </div>
    </section>
</body>
</html>

enter image description here

Answer 1

我假设您要实现以下目标：

section {
  padding: 25px 20px;
}

.red {
  background: red;
}

.green {
  background: green;
}

.blue {
  background: blue;
}

section:nth-child(2) {
margin-top: -10px;
  clip-path: polygon( 0 10px, 100% 0, 100% 100%, 0 100%);
}

section:nth-child(3) {
margin-top: -10px;
  clip-path: polygon( 0 0, 100% 10px, 100% 100%, 0 100%);
}

<section class="red">Top</section>
<section class="green">Middle</section>
<section class="blue">Bottom</section>

我个人会使用这种方法，因为它干净且易于实现。您可以应用剪切路径使顶部边缘倾斜，然后使用负边距将元素拉到元素上方的顶部。您可以在重叠的元素上添加额外的填充，以确保不覆盖内容。

堆叠倾斜的div与背景图片

1 个答案: