多个剪辑路径答案

【问题标题】：Multiple clip-paths多个剪辑路径
【发布时间】：2018-11-13 03:28:50
【问题描述】：

我正在尝试制作一个理想的网站布局，由多个 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 来保持我想要的倾斜底部的外观。

我从某个地方获取了一些代码，我可以使用剪辑路径让第一个 div 框按照我想要的方式倾斜到另一个。我的问题是，我希望下一个 div 也有一个倾斜的底部 - 大概是通过使用剪辑路径？ - 但是当我尝试这样做时，它可以工作，但第一个“剪辑路径倾斜”恢复为不存在。

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

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

【问题讨论】：

标签： html css clip-path

【解决方案1】：

这里的问题是关于stacking-context 和painting order。如果您将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 的另一种解决方案是换种方式思考，而不是在底部中创建slateend部分，而是在顶部中创建它。这样我们就可以利用逻辑上的绘制顺序，避免与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>

【讨论】：

太棒了！一下子就说得通了。但是您的解决方案为我创造了另一个答案；如果紫色 div 是我的最终 div 怎么办？我如何单独删除那个底部的倾斜？
@treadwell 只需从中删除剪辑路径；）......我只是使用一个选择器将剪辑路径应用于所有这些，以避免重复并有一个短代码；）
你绝对的天才！我去洗一下我的眼镜...谢谢！