父div使用剪切路径剪切子div

Question

我正在尝试使用剪切路径剪切背景色。它正在工作，但问题在于它也削减了子div。

我将剪辑路径添加到了父div，这就是我遇到此问题的原因。  我应该使用: before还是: after？

或者还有其他使用CSS处理此问题的方法吗？ 您能帮我解决这个问题吗？

.wrapper {
  margin-top: 50px;
}

.demo {
  background-color: red;
  padding: 50px;
  box-sizing: border-box;
  -webkit-clip-path: polygon(100% 0, 100% 49%, 0 100%, 0 1%);
  clip-path: polygon(100% 0, 100% 49%, 0 100%, 0 1%);
}

.demo_content {
  background-color: #fff;
}

<div class="wrapper">
  <section class="demo">
    <div class="container">
      <div class="row">
        <div class="demo_content">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
      </div>
    </div>
  </section>
</div>

Answer 1

以下是使用伪元素的方法，制作一个具有相同高度和宽度的伪元素，将其移至背面，并用苹果夹夹住。

.wrapper {
  margin-top: 50px;
}

.demo {
  position: relative;
  padding: 50px;
  box-sizing: border-box;
}

.demo::after {
  content: '';
  background-color: red;
  display: block;
  position: absolute;
  -webkit-clip-path: polygon(100% 0, 100% 49%, 0 100%, 0 1%);
  clip-path: polygon(100% 0, 100% 49%, 0 100%, 0 1%);
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

.demo_content {
  background-color: #fff;
}

<div class="wrapper">
  <section class="demo">
    <div class="container">
      <div class="row">
        <div class="demo_content">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        </div>
      </div>
    </div>
  </section>
</div>

Answer 2

除了pgAdmin，您还可以考虑使用渐变作为背景，这样您将获得更好的支持：

clip-path

.wrapper {
  margin-top: 50px;
}

.demo {
  background:
   linear-gradient(red,red) top,
   linear-gradient(to bottom right,red 49.8%,transparent 50%) bottom;
  background-size:100% 50%;
  background-repeat:no-repeat;
  padding: 50px;
  box-sizing: border-box;
}

.demo_content {
  background-color: #fff;
}