Несколько клипов - PullRequest
Новая
       3

Несколько клипов

0 голосов
/ 03 июня 2018

Я пытаюсь сделать макет веб-сайта, в идеале, состоящий из нескольких элементов 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, чтобы наклонить его так, как мне хотелось бы, по другому, используя clip-path.Моя проблема в том, что я бы хотел, чтобы у следующего div тоже было наклонное дно - предположительно с использованием пути клипа?- но когда я пытаюсь это сделать, это работает, но первый «наклон пути клипа» возвращается к тому, что он уже не существует.

Потому что, как я упоминал ранее, я вырвал код откуда-то, яне полностью понимаю значения свойств пути клипа, которые я смотрю.

Надеюсь, я не слишком запутался, и спасибо за вашу помощь заранее!

1 Ответ

0 голосов
/ 03 июня 2018

Проблема здесь касается стекового контекста и порядка рисования .если вы добавите clip-path к следующему элементу, он будет на вершине первого, потому что он создаст новый контекст стека и будет окрашен позже , а так как у нас есть отрицательное поле, он будет скрыватьотсеченная часть первого.

Вычисленное значение, отличное от ни одного, приводит к созданию стекового контекста так же, как непрозрачность 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>
...