多个剪辑路径

Question

我正在尝试制作一个网站布局，理想情况下由多个 div 组成，我希望每个都有一个倾斜的底部，进入下面的那个。

以下是到目前为止的模型：

@charset "utf-8";
/* CSS Document */

* {
 margin: 0;
 font-size: 10px;
}

.red {
 position: relative;
   height: 500px;
   background: red;
 background-size: cover;
 background-repeat: no-repeat;
 background-position: center;
   clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 5vw));
}
 
.blue {
 height: 500px;
 margin-top: -5vw;
 background: blue;
}

.green {
 height: 500px;
 margin-top: -5vw;
 background: green;
}

.orange {
 height: 500px;
 margin-top: -5vw;
 background: orange;
}

.purple {
 height: 500px;
 margin-top: -5vw;
 background: purple;
}

<!doctype html>

<html>
 
<head>
 <meta charset="utf-8">
 <title>Untitled Document</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
 
<body>
 <div class="red"></div>
 <div class="blue"></div>
 <div class="green"></div>
 <div class="orange"></div>
 <div class="purple"></div>
</body>
 
</html>

如您所知，我只能得到第一个 div 来保持我想要的斜底外观。

我从某处获取了一些代码，并且我可以使用 clip-path 获得第一个 div 框以我想要的方式倾斜到另一个框上。我的问题是，我希望下一个 div 也有一个倾斜的底部 - 大概是通过使用剪辑路径？ - 但是当我尝试这样做时，它起作用了，但是第一个 'clip-path slant' 恢复为不存在。

因为 - 正如我之前提到的 - 我从某处获取了代码，我不完全理解我正在查看的 clip-path 属性的值。

希望我没有太混乱，提前感谢您的帮助！

Answer 1

这里的问题是关于 stacking-context and painting order。如果您将 clip-path 添加到您的下一个元素，这个元素将位于第一个元素的顶部，因为它将创建一个新的堆叠上下文并将在 later 上绘制并且因为我们有负边距它会隐藏第一个的剪裁部分。

A computed value of other than none results in the creation of a stacking context the same way that CSS opacity does for values other than

一个简单的解决方案是添加 z-index 来纠正这一切：

body {
  margin: 0;
  font-size: 10px;
}

body>div {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 5vw));
  position: relative;
  height: 500px;
}

.red {
  z-index: 5;
  background: red;
}

.blue {
  z-index: 4;
  margin-top: -5vw;
  background: blue;
}

.green {
  z-index: 3;
  margin-top: -5vw;
  background: green;
}

.orange {
  z-index: 2;
  margin-top: -5vw;
  background: orange;
}

.purple {
  z-index: 1;
  margin-top: -5vw;
  background: purple;
}

<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
<div class="orange"></div>
<div class="purple"></div>

另一种避免添加很多 z-index 的解决方案是换一种方式思考，而不是在底部中创建 slated 部分，我们在 中创建它顶部。这样我们就获得了逻辑排列顺序的优势，并且避免了 z-index.

的复杂化

body {
  margin: 0;
  font-size: 10px;
}

body>div {
  margin-bottom:-5vw;
  height: 500px;
}

body>div:not(:first-child) {
  clip-path: polygon(0 0, 100%  5vw, 100% 100%, 0 100%);  
}

.red {
  background: red;
}

.blue {
  background: blue;
}

.green {
  background: green;
}

.orange {
  background: orange;
}

.purple {
  background: purple;
}

<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
<div class="orange"></div>
<div class="purple"></div>

多个剪辑路径

Multiple clip-paths

html

css

clip-path