多个剪切路径 [英] Multiple clip-paths
问题描述
我正在尝试使网站布局理想地由多个div组成，我希望每个div的底部都有一个倾斜的底部，进入下面的div。
I'm trying to make a website layout ideally consisting of multiple divs, where I'd like each one to have a slanted bottom, going into the one below.
这是到目前为止的样机：
Here's a look at the mockup so far:
@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以保持我想要的倾斜底部的外观。
As you can tell, I can only get the first div to maintain the apperance I'd like of the slanted bottom.
我已经从某个地方抓取了一些代码，并且可以使用剪切路径使第一个div框倾斜到我希望的其他位置。我的问题是，我想让下一个div的底部也倾斜-大概是通过使用剪切路径？ -但是，当我尝试执行此操作时，它起作用了，但是第一个剪切路径倾斜恢复为不存在。
I've snatched some code from somewhere, and I can get the first div box to slant the way I'd like over the other, using clip-path. My problem is, I'd like for the next div to also have a slanted bottom - presumably by using clip path? - but when I attempt this, it works, but the first 'clip-path slant' reverts back to being non-existant.
因为-正如我之前提到的-我从某个地方抢走了代码，我不完全了解我正在查看的剪切路径属性的值。
Because - as I mentioned earlier - I've snatched the code from somewhere, I do not fully understand the values of the clip-path properties that I'm looking at.
希望我并不太困惑，感谢您的提前帮助！
Hopefully I've not been too confusing, and thanks for your help in advance!
推荐答案
此处的问题与 stacking-context有关和绘画顺序。如果在下一个元素中添加 clip-path ，则该元素将位于第一个元素的顶部，因为它将创建一个新的堆叠上下文并被绘制为稍后，并且由于我们的边距为负，因此它将隐藏第一个的剪裁部分。
The issue here is about stacking-context and painting order. if you add clip-path to your next element this one will be on the top of the first because it will create a new stacking context and will be painted later and since we have the negative margin it will hide the clipped part of the first one.
计算出的值除 none以外的值都会导致创建
堆叠上下文的方式与CSS不透明度
对
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 来纠正所有这些问题：
A trivial solution is to add z-index to correct all this:
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 的复杂性。
Another solution to avoid adding many z-index is to think differently and instead of creating the slatend part in the bottom, we create it in the top. Like that we get the advantage of the logicial paiting order and we avoid complication with 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>
这篇关于多个剪切路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
