Multiple clip-paths | 易学教程

问题

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>

As you can tell, I can only get the first div to maintain the apperance I'd like of the slanted bottom.

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!

回答1:

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.

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

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>

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>

来源：https://stackoverflow.com/questions/50669671/multiple-clip-paths

标签

html

css

css3

clip-path