Html 按对角线拆分网页

我是新手，正在寻求帮助。 我想把网页按对角线分开。我可以单独使用HTML和CSS吗？

---

请给我一些建议。

您可以使用CSS剪辑路径属性。

在您的使用中，我将使用：

clip-path: polygon();

属性。此属性允许您定义在元素中角点的拉回方式。在本例中，我使用了两个div并将它们的角向后拉，使它们看起来成对角线

使用

在我的CSS中，我可以使用百分比和vh（视口高度）计算最终值，这使得不同的屏幕纵横比不会影响对角线的倾斜程度

当您使用clip path时，它实际上会从div元素中剪切出一个块。这意味着文本将被删除。为了解决这个问题，我在受尊重的div的左侧和右侧添加了一个填充，以将内容推入

此外，元素的边距保持为矩形。所以你要把大块的东西切掉，但这会在元素之间产生一个对角线的间隙。所以，为了把这些元素推到一起，我扣除了边距

最后，剪辑路径也会剪切边界。因此，为了创建橙色线条，我使用了wrapper div并设置了它的背景色。我还保持了足够小的边距，以保持两个div元素之间的间隙

在这段代码中，我可能不小心把对角分开的方向弄错了。。。哦，好吧！只需将“剪辑路径”属性中的值更改为其他值即可。：）

看一看

正文{
保证金：0；
字号：2em；
}
#着陆区{
宽度：100vw；
高度：100vh；
显示器：flex；
背景色：#F46835；
}
#左框{
宽度：50%；
剪辑路径：多边形（0 0，计算（100%-10vh）0，100%100%，0 100%）；
-webkit剪辑路径：多边形（0 0，计算（100%-10vh）0，100%100%，0 100%）；
保证金权利：-4.2vh；
填充：5px11vh 5px5px；
背景色：#F4FCFF；
文本对齐：居中；
}
#右框{
宽度：50%；
剪辑路径：多边形（0,100%0,100%100%，计算（0%+10vh）100%）；
-webkit剪辑路径：多边形（0,100%0,100%100%，计算（0%+10vh）100%）；
左边距：-4.2vh；
填充：5px 5px 5px 11vh；
背景色：#44325A；
文本对齐：居中；
}

包厢1！
盒子2！

Hi，此“拆分”后的结果页面是什么？您可以使用transform:skewX（-20deg）；您可以通过使用CSS3转换或SVG来实现这一点。请看以下内容：

calc();