Question

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

This
And This

我想这样做，但我只找到水平对角线div的帖子。

谢谢。

编辑：第二个图像从上方链接了它的延续。

Answer 1

在Internet上尝试使用这种最简单的解决方案来制作多边形形状

您可以使用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/

让我知道你是否什么都不懂。我非常乐意为您提供帮助。

Answer 2

我对对角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;

如何使像这样的对角div？

2 个答案: