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!

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>

Multiple clip-paths

问题:

回答1:

收藏的人(0)

Multiple clip-paths

问题:

回答1:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮