您将如何创建对角线摄影面板'；CSS中的合成？

以下是我想要实现的目标：

以下是我所做的：

这是一种工作，但你可以看到有一个轻微的滞后，在极端的图片相对的角落-作为突出显示在两个粉红色的圆圈我的照片。当您移动屏幕大小时，您可以看到它

我如何才能确保蒙太奇的极端始终保持在父母盒子的角落

代码如下：

import React，{Component}来自“React”；
从“react dom”导入{render}；
从“/style.module.css”导入样式；
导出默认类应用程序扩展组件{
render（）{
返回(
);
}
}

.component{
宽度：100vw；
最小高度：100vh；
背景：#010014；
背景：#1480db；
背景：#0eb0eb；
背景#04d1de；
背景#02d7eb；
背景：02c2d4；
背景：#00c6da；
背景：#00cdd7；
颜色：白色；
字号：5em；
字体大小：粗体；
}
.首页{
宽度：100vw；
高度：80vh；
背景：url（/static/top\u page/top\u page\u image.png）top/contain no repeat；
}
.集装箱{
宽度：自动；
高度：40vh；
溢出：隐藏；
位置：相对位置；
对齐项目：居中；
保证金：自动；
边缘顶部：100px；
背景：黄色；
}
·摄影{
位置：绝对位置；
宽度：25vw；
高度：40vh；
}
.对角线摄影{
宽度：80vw；
高度：180vh；
位置：相对位置；
底部：60vh；
变换：旋转（20度）；
左：5vw；
}
.摄影(1 img){
}
.摄影(2 img){
z指数：100；
}
.摄影(3 img){
右：0；
排名：0；
}

---

下面是一个使用剪辑路径的想法：

.box{
宽度：300px；
高度：300px；
背景：
网址(https://i.picsum.photos/id/25/400/800.jpg)左,，
网址(https://i.picsum.photos/id/37/400/800.jpg)对,；
背景大小：50%100%；
背景重复：无重复；
/*调整它的大小，它的反应*/
调整大小：两者；
溢出：自动；
}
.box：：之前{
内容：“；
显示：块；
身高：100%；
背景：url(https://i.picsum.photos/id/104/800/800.jpg)中心/盖；
剪辑路径：多边形（40%0100%0,60%100,01100%）；
}

---

您最好使用

剪辑路径

@chriskirknielsen有效地剪辑路径在这种情况下似乎很有趣将您的代码添加到question@TemaniAfif代码位于post nowtested on codepen中，有效响应：。