如何制作这样的对角线 div？

Question

我正在搜索对角 div，但没有找到任何可以帮助我的东西。我有这个项目要做，我需要做这个。

This
And This

我也想这样做，但我只找到带有水平对角线 div 的帖子..

谢谢，问候。

编辑：第二张图片link是上面的延续。

Answer 1

我对对角线 div 一无所知，但你可以尝试用

覆盖你需要的部分 img

.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;

Answer 2

试试这个 Internet 上最简单的多边形制作方法

您可以使用 CSS 属性 clip_path 生成任何类型的形状。

-webkit-clip-path: polygon(0 33%,100% 10%,100% 60%,0 85%); This line represents that we are drawing polygon which has four points and specifying the location of each point in terms of x and y. You can specify the position in terms of px, % or any unit terminology

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>

并检查这个 link，我在其中编写了相同的代码只是为了说明剪辑路径功能，jsfiddle

有关进一步的详细说明，请检查这些 link：

如果您有任何不明白的地方，请告诉我。我非常乐意为您提供帮助。

如何制作这样的对角线 div？

How to make diagonal divs like this?

html

image

diagonal