html - CSS对角线分隔2个图像

Question

我的任务是用 html 和 css 重新创建这个模型。在过去的几个小时里，我一直在摆弄尝试使用剪辑路径和边框，但我无法实现模型的结果。

我已经获得了 2 个图像资源，并且图像不包含文本或按钮。

#index-custom-content {
    height: 40rem;
    padding-bottom: -20%;
}

#index-custom-content div:nth-of-type(1){
    position: relative;
    width: 100%;
}

#index-custom-content div:nth-of-type(2) {
    clip-path: polygon(0 0, 100% 90%, 100% 100%, 0 10%);
    background-color: black;
    z-index: 1000;
    position: relative;
    top: -2em;
}

#index-custom-content div:nth-of-type(3){
    position: relative;
    top: -20%;
    width: 100%;
    z-index: -100;
}

<div id="content">
        <div id="index-custom-content">
            <div><img src="bare-rolig.jpg"></div>
            <div>asd</div>
            <div><img src="bestseller.gif"> </div>
        </div>
    </div>

我的问题是，当给定 2 个大小不等的图像（宽度和高度）时，如何实现分隔 2 个图像的对角线。它也可以调整大小，比例正确，线条的宽度也保持不变。

非常感谢任何建议或正确方向的观点！先感谢您！

标签： htmlcss

Answer 1

具有负边距的剪辑路径：

.first,
.second{
  --s:100px;
  height:300px;
}

.first {
  background:red;
  clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - var(--s)));
}

.second {
  background:green;
  /* a little smaller than --s to create a gap */
  margin-top: calc(var(--s) * -1  + 10px);
  clip-path:polygon(0 0,100% var(--s),100% 100%,0 100%);
}

<div class="first"></div>
<div class="second"></div>