Html 使用多边形复制剪辑路径

因此，我尝试复制以下屏幕截图：

使用纯css很容易做到这一点。花了3秒钟

但是我需要支持IE9，它不支持

剪辑路径

。我能找到的唯一替代方法是使用SVG来创建一个能够正确伸缩的div

页面永远不必滚动，因此我的计划是拥有一个绝对定位的div，其中包含svg并将内容分层。 这就是问题所在，目前我的代码生成了以下内容：

帮忙

下面是底层代码：

错误404
身体{
背景#f1f1；
背景图像：url（'https://wallpaperclicker.com/storage/wallpaper/High-Definition-Ultra-HD-Wallpaper-96262544.jpg');
背景尺寸：封面；
}
正文，html{
身高：100%；
填充：0；
保证金：0；
}
.main背景{
身高：100%；
宽度：100%；
}
.主货柜{
身高：100%；
宽度：80%；
}

您的viewBox的纵横比与容器不匹配，因此会出现间隙。您可以使用preserveSpectratio=“none”允许纵横比随容器形状而变化

错误404
身体{
背景#f1f1；
背景图像：url（'https://wallpaperclicker.com/storage/wallpaper/High-Definition-Ultra-HD-Wallpaper-96262544.jpg');
背景尺寸：封面；
}
正文，html{
身高：100%；
填充：0；
保证金：0；
}
.main背景{
身高：100%；
宽度：100%；
}
.主货柜{
身高：100%；
宽度：80%；
}

谢谢！成功了。我不知道纵横比会影响多边形和禁用该行为的标记。