Javascript 在HTML中创建自定义形状区域

对于projet，我需要制作一个包含三个区域的页面，每个区域的形状不同

像这样：

接触点必须始终位于页面的中间，每个区域都有一个图像作为背景。单击特定区域上的任意位置将重定向到另一页

我已经尝试使用SVG，但是我无法让图像保持相同的纵横比，而是让SVG根据页面调整大小

html，正文{
保证金：0；
身高：100%；
}
svg{
位置：绝对位置；
左：0；
排名：0；
宽度：100%；
高度：100vh；
}

 > p>我会考虑<代码>剪辑路径< /> >背景>图像


正文{
保证金：0；
高度：100vh；
显示器：flex；
}
左边
.对{
宽度：50%；
}
.顶{
位置：绝对位置；
z指数：1；
排名：0；
左：0；
右：0；
身高：50%；
背景：url(https://picsum.photos/800/500?image=1069)中心/盖；
-webkit剪辑路径：多边形（50%100%，0,100%0）；
剪辑路径：多边形（50%100%，0.0，100%0）；
}
.左{
背景：url(https://picsum.photos/800/500?image=1060)中心/盖；
}
.对{
背景：url(https://picsum.photos/800/500?image=1050)中心/盖；
}

 > p>我会考虑<代码>剪辑路径< /> >背景>图像


正文{
保证金：0；
高度：100vh；
显示器：flex；
}
左边
.对{
宽度：50%；
}
.顶{
位置：绝对位置；
z指数：1；
排名：0；
左：0；
右：0；
身高：50%；
背景：url(https://picsum.photos/800/500?image=1069)中心/盖；
-webkit剪辑路径：多边形（50%100%，0,100%0）；
剪辑路径：多边形（50%100%，0.0，100%0）；
}
.左{
背景：url(https://picsum.photos/800/500?image=1060)中心/盖；
}
.对{
背景：url(https://picsum.photos/800/500?image=1050)中心/盖；
}


*{
保证金：0；
填充：0；
框大小：边框框；
-webkit框大小：边框框；
-moz框大小：边框框；
}
.主包装{
位置：相对位置；
最小高度：100vh；
溢出：隐藏；
}
.主包装a部分{
宽度：100%；
身高：100%；
显示：块；
}
.main wrap节[role=“s1”]{
背景：#333；
宽度：100%；
高度：计算（50vh）；
-webkit剪辑路径：多边形（50%100%，0,100%0）；
剪辑路径：多边形（50%100%，0.0，100%0）；
}
.主包装部分a img{
宽度：100%；
高度：自动；
}
.main wrap节[role=“s2”]{
宽度：计算（50vw）；
高度：计算（100vh）；
背景：#000；
位置：绝对位置；
排名：0；
左：0；
-webkit剪辑路径：多边形（0.0%，100%50%，100%100%，0%100%）；
剪辑路径：多边形（0.0%，100%50%，100%100%，0%100%）；
}
.main wrap节[role=“s3”]{
宽度：计算（50vw）；
高度：计算（100vh）；
背景：#eee；
位置：绝对位置；
排名：0；
右：0；
-webkit剪辑路径：多边形（100%0、0%50%、0%100%、100%100%）；
剪辑路径：多边形（100%0、0%50%、0.100%、100%100%）；
}


*{
保证金：0；
填充：0；
框大小：边框框；
-webkit框大小：边框框；
-moz框大小：边框框；
}
.主包装{
位置：相对位置；
最小高度：100vh；
溢出：隐藏；
}
.主包装a部分{
宽度：100%；
身高：100%；
显示：块；
}
.main wrap节[role=“s1”]{
背景：#333；
宽度：100%；
高度：计算（50vh）；
-webkit剪辑路径：多边形（50%100%，0,100%0）；
剪辑路径：多边形（50%100%，0.0，100%0）；
}
.主包装部分a img{
宽度：100%；
高度：自动；
}
.main wrap节[role=“s2”]{
宽度：计算（50vw）；
高度：计算（100vh）；
背景：#000；
位置：绝对位置；
排名：0；
左：0；
-webkit剪辑路径：多边形（0.0%，100%50%，100%100%，0%100%）；
剪辑路径：多边形（0.0%，100%50%，100%100%，0%100%）；
}
.main wrap节[role=“s3”]{
宽度：计算（50vw）；
高度：计算（100vh）；
背景：#eee；
位置：绝对位置；
排名：0；
右：0；
-webkit剪辑路径：多边形（100%0、0%50%、0%100%、100%100%）；
剪辑路径：多边形（100%0、0%50%、0.100%、100%100%）；
}

那么，如果前面有图片，颜色有什么意义呢？你打算增加不透明度：0.5吗？嗯，看起来不错，不是吗？到底是什么问题？在我看来，这似乎是个问题middle@wayneOS问题是，当您调整窗口大小时，图片的纵横比会发生变化。如果前面有图片，颜色有什么意义？你打算增加不透明度：0.5吗？嗯，看起来不错，不是吗？到底是什么问题？在我看来，这似乎是个问题middle@wayneOS问题是，当您调整窗口大小时，图片的纵横比会发生变化，而这可能会回答此问题。最好添加一些说明，说明此答案如何帮助解决此问题。请阅读以了解更多信息。虽然这可能会回答问题，但最好添加一些关于此答案如何帮助解决问题的说明。请阅读了解更多。谢谢你这正是我要找的。尽管如此，您是否知道有其他更好的浏览器支持方式？@jrmybaud，背景图像有点困难，但如果背景是静态颜色，是的，我知道，谢谢，这正是我想要的。尽管如此，您知道有其他更好的浏览器支持方式吗？@jrmybeaud使用背景图像有点困难，但如果背景是静态颜色，我知道