多个剪辑路径
多个剪辑路径
提问于 2018-06-04 02:30:08
我正在尝试做一个理想的由多个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也有一个倾斜的底部-大概是通过使用剪辑路径？-但当我尝试这样做时，它可以工作，但是第一个‘剪辑路径倾斜’恢复为不存在。
因为-正如我前面提到的-我从某个地方抓取了代码，我不能完全理解我正在查看的剪辑路径属性的值。
希望我没有太困惑，并感谢您的帮助提前！
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-04 02:44:50
这里的问题是关于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的解决方案是以不同的方式思考，而不是在底层中创建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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50669671
复制相关文章
相似问题