多重剪切路径

Question

多重剪切路径

4

我正在尝试制作一个网站布局，理想情况下由多个 div 组成，我希望每个 div 的底部都倾斜，并与下面的 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也有一个倾斜的底部 - 可能是通过使用裁剪路径？- 但是当我尝试这样做时，它虽然起作用，但第一个“裁剪路径斜面”会恢复到不存在的状态。

因为 - 如我之前所提到的 - 我从某个地方拿了代码，我不完全理解我正在查看的裁剪路径属性的值。

希望我没有太混淆，谢谢您的帮助！

- spøjst

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Temani Afif · Accepted Answer

这里的问题与堆叠上下文和绘制顺序有关。如果您在下一个元素中添加clip-path，它将位于第一个元素的顶部，因为它会创建一个新的堆叠上下文，并且将在稍后绘制，由于我们有负边距，它将隐藏第一个元素的裁剪部分。

除了none之外的计算值会创建堆叠上下文，就像CSS不透明度对其他值一样。

解决方案是添加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的解决方案是换个思路，不要在底部创建slatend部分，而是在顶部创建。这样我们就可以利用逻辑绘画顺序的优势，避免使用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>