使用剪辑路径时隐藏图像和标题：多边形HTML/CSS

每当我更改属性“calc（100%-90 vw）”（例如，从90更改为10）时，页面的蓝色部分就会更改。但是标题是隐藏的，根据我对它的更改，它只显示了一部分。如何在不隐藏文本的情况下更改它

这是我的密码：

div.头版{
背景色：#cddaee；
剪辑路径：多边形（0,100%0,100%100%，0计算（100%-2vw））；
/*高度：500px*/
}
分区头h1，
氢{
左边距：2.5英寸；
字体大小：35px；
字体：斜体；
字体系列：“时代新闻罗马”；
}

无标题
我

您可以使用

h2

作为参考，使用伪元素上的倾斜变换替换剪辑路径，以便即使调整屏幕大小，也保持相同的角度和原点：

为了让技巧发挥作用，您需要创建h2

内联块

，并使用大值扩展伪元素以覆盖整个区域

div.头版{
位置：相对位置；
z指数：0；
溢出：隐藏；
}
部门头版h2{
位置：相对位置；
显示：内联块；
边际上限：0；
}
部门头版h2：之前{
内容：“；
位置：绝对位置；
z指数：-1；
顶部：-100vh；
左：-100vw；
右图：-100vw；
底部：7px；
背景:#cddaee；
变换：歪斜（1deg）；
}
分区头h1，
氢{
左边距：2.5英寸；
字体大小：35px；
字体：斜体；
字体系列：“时代新闻罗马”；
}

无标题
我

使用像素而不是vw@TemaniAfif谢谢你抽出时间。但这不起作用，当我改变标题时，部分内容被隐藏了。非常感谢。你能帮我一件事吗？我怎样才能从右下角到左上角形成对角线？这一页应该是半蓝半白。我怎么控制这个？