即使使用 overflow-x CSS 也会溢出：隐藏在 html 元素上

Question

我想要从页面边缘“窥视”一些图形。图形是SVG，看不见的部分应该从屏幕边缘“切掉”

我试图建立一个通用类

.graphic

，其位置为

relative

。我将 SVG 加载为

content

的

.graphic::before

。

::before

有

absolute

位置，我尝试使用

inset

将它放在屏幕的边缘。这会导致出现水平滚动，这是我不想要的。请注意，这似乎在桌面上正常工作，但如果您以响应模式打开它，并使用任何移动视图，您会注意到水平滚动。

我试图将

overflow-x: hidden

放在

html

元素上，但它没有帮助。 有人知道如何实现这一目标吗？

你可以在这里看到最小的例子：https://stackblitz.com/edit/vitejs-vite-naovyb?file=src/style.css

在上面的例子中有趣的是，左边的图形单独不会导致溢出。一旦我添加了正确的，就会出现溢出。这是什么原因？