时间戳

首页 > 解决方案 > 如何制作这样的对角线div？

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

问题描述

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

这个
和这个

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

感谢和问候。

编辑：第二张图片链接它上面的延续。

标签： htmlimagediagonal

解决方案

在互联网上尝试这个最简单的解决方案来制作多边形形状

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

有关更多详细信息说明，请查看以下链接：

如果你有什么不明白的，请告诉我。我很乐意为您提供帮助。

推荐阅读