带有偏移量的对角线切割图像，适用于所有屏幕尺寸

如何解决带有偏移量的对角线切割图像，适用于所有屏幕尺寸

我需要实现这个块元素：

顶部/底部可以有元素。我的问题是在任何屏幕分辨率下始终保持对角线分割。

* {
  margin: 0;
  padding: 0;
  Box-sizing: border-Box;
}

img {
  display: inline-block;
  width: 100%;
}

.content {
  padding: 50px;
  height: 50vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.horizontalbar {
  display: flex;
  height: 500px;
  width: 100%;
  position: relative;
}

.horizontalbar img {
  position: absolute;
  -o-object-fit: cover;
  object-fit: cover;
  height: 100%;
  width: calc(100% - 5vw);
}

.horizontalbar img.image1 {
  left: 0;
  top: 5vw;
  -webkit-clip-path: polygon(0 0,calc(100% - 25vw) 0%,25vw 100%,0% 100%);
  clip-path: polygon(0 0,0% 100%);
}

.horizontalbar img.image2 {
  right: 0;
  top: -5vw;
  -webkit-clip-path: polygon(calc(100% - 25vw) 0,100% 0%,100% 100%,calc(25vw) 100%);
  clip-path: polygon(calc(100% - 25vw) 0,calc(25vw) 100%);
}

<div class="content">
  <div class="horizontalbar">
    <img src="https://source.unsplash.com/900x1300/?women" alt="" class="image1">
    <img src="https://source.unsplash.com/900x1400/?man" alt="" class="image2">
  </div>
</div>

live codepen

我假设有一些 js 会根据屏幕大小不断调整剪辑，但是这里需要做哪些数学/计算？有没有更好的方法来实现这一目标？

解决方法

简化您的 clip-path 并控制 background-position 以创建顶部和底部空间：

.box {
  display: flex;
  height: 400px;
}

.box>div {
  flex: 1;
}

.box>div:first-child {
  margin-right: -10vw;
  background: url(https://picsum.photos/id/1018/800/800) top 50px center /cover no-repeat;
  clip-path: polygon(0 0,100% 0,calc(100% - 20vw - 5px) 100%,0 100%);
}

.box>div:last-child {
  margin-left: -10vw;
  background: url(https://picsum.photos/id/125/800/800) bottom 50px center /cover no-repeat;
  clip-path: polygon(calc(20vw + 5px) 0,100% 100%,0 100%);
}

<div class="box">
  <div></div>
  <div></div>
</div>

也像下面这样：

.box {
  display: flex;
  height: 400px;
}

.box>div {
  flex: 1;
  position:relative;
}
.box > div::before {
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:calc(100% - 50px);
  background: var(--i) center /cover no-repeat;
}

.box>div:first-child {
  margin-right: -10vw;
  clip-path: polygon(0 0,0 100%);
}
.box>div:first-child::before {
  bottom:0;
}

.box>div:last-child {
  margin-left: -10vw;
  clip-path: polygon(calc(20vw + 5px) 0,0 100%);
} 
.box>div:last-child::before {
  top:0;
}

<div class="box">
  <div style="--i:url(https://picsum.photos/id/1018/800/800)"></div>
  <div style="--i:url(https://picsum.photos/id/125/800/800)"></div>
</div>