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

Question

我需要实现这个块元素：

其中可以包含 top/bottom 上的元素。我的问题是在任何屏幕分辨率下始终保持对角线分割。

* {
  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, calc(100% - 25vw) 0%, 25vw 100%, 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, 100% 0%, 100% 100%, 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 来根据屏幕大小不断调整剪辑，但是 math/calculations 这里需要做什么？有没有更好的方法来实现这个？

Answer 1

简化您的 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% 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, 100% 0, calc(100% - 20vw - 5px) 100%, 0 100%);
}
.box>div:first-child::before {
  bottom:0;
}

.box>div:last-child {
  margin-left: -10vw;
  clip-path: polygon(calc(20vw + 5px) 0, 100% 0, 100% 100%, 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>

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

Diagonal cut images with offset, working on all screen sizes

css

image

intersection

diagonal