Как сделать диагональные делители, как это? - PullRequest
Новая
       13

Как сделать диагональные делители, как это?

0 голосов
/ 27 февраля 2019

Я искал диагональные деления и не нашел ничего, что могло бы мне помочь.У меня есть этот проект, и я должен сделать это.

Это
И Это

Я хочу сделать именно такно я нахожу только посты с горизонтальными диагональными делениями ..

Спасибо, с уважением.

Редактировать: Второе изображение ссылки это продолжение сверху.

Ответы [ 2 ]

0 голосов
/ 27 февраля 2019

Попробуйте это самое простое решение в Интернете для создания многоугольников

. Вы можете использовать свойство CSS clip_path для создания фигуры любого типа.

-webkit-clip-path: многоугольник (0 33%, 100% 10%, 100% 60%, 0 85%);Эта линия показывает, что мы рисуем многоугольник с четырьмя точками и указываем местоположение каждой точки в терминах x и y.Вы можете указать позицию в терминах px, % или любой терминологии единиц 

CSS Code
#header{
background-color:green;
height:350px;
width:100%;
-webkit-clip-path: polygon(0 33%,100% 10%,100% 60%,0 85%);
}

И 

HTML Code
<html>
<head>

</head>
<body>
<div id="header">

</div>
</body>
</html>

И проверить эту ссылку, где я написалтот же код, чтобы проиллюстрировать функциональность пути клипа, jsfiddle https://jsfiddle.net/n1y4et70/6/

For further and details Explanation check these links:
https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
https://css-tricks.com/almanac/properties/c/clip/

, дайте мне знать, если вы ничего не поняли.Я буду более чем рад помочь вам.

0 голосов
/ 27 февраля 2019

Я ничего не знаю о диагональных делениях, но вы можете попытаться охватить нужные вам части изображения с помощью 

.cover {
position: absolute;
top: -25px; /* or differenet position that fit on every section*/
left: 0;
z-index: 1;
width: 100vw;
height: 50px; /* or different height that you need*/
transform: rotate(-10deg); /* or different angle*/
background-color: white;
}
<div class="cover"></div>
И то же самое в нижней части секции.

Обязательно установите переполнение и положение для каждой секции: 

overflow: hidden;
position: relative;
...