我被困在這一段時(shí)間，但我不知道如何正確地做到這一點(diǎn)。

我想要的結(jié)果是兩個(gè)圖像并排，中間有一個(gè)間隙。

我的問題是，當(dāng)瀏覽器調(diào)整大小時(shí)，它不會(huì)保留間隙和圖像& quot合并& quot或者擴(kuò)展瀏覽器差距變大。

代碼:

.hs-media {
  --hs-media-overlap: 7.5rem;
  --hs-media-col-size: calc(var(--hs-media-overlap) / 2);
  list-style: none;
  display: grid;
  gap: 1rem;
  grid-template-columns: [one] auto [two-begins] minmax(0, var(--hs-media-col-size)) minmax(0, var(--hs-media-col-size)) [one-ends] auto [two];
}

[class*="hs-media__col-"] {
  grid-row: 1;
  position: relative;
  display: flex;
  min-block-size: 100%;
}

.hs-media__col-1 {
  grid-column: one/one-ends;
  clip-path: polygon(0% 0%, 100% 0%, 85% 100%, 0% 100%);
}

.hs-media__col-1::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  block-size: 100%;
  inline-size: 100%;
  background: rgba(51, 153, 68, 0.79);
  mix-blend-mode: multiply;
}

.hs-media__line {
  grid-column: one/line;
  grid-row: 1;
  block-size: 100%;
  background-color: white;
  clip-path: polygon(0% 0%, 100% 0%, 85% 100%, 0% 100%);
}

.hs-media__col-2 {
  grid-column: two-begins/two;
  clip-path: polygon(15% 0, 100% 0%, 100% 100%, 0% 100%);
}

.hs-media__image {
  inline-size: 100%;
  object-fit: cover;
}

<ul class="hs-media">
  <li class="hs-media__col-1">
    <img src="https://source.unsplash.com/Ul-Cp7f_CGQ/1440x546" class="hs-media__image" />
  </li>

  <li class="hs-media__col-2">
    <img src="https://source.unsplash.com/t8QeaJkxp4M/1800x546" class="hs-media__image" />
  </li>
</ul>

我有一篇關(guān)于這種布局的詳細(xì)文章，你也可以有懸停效果:https://css-tricks.com/css-grid-and-custom-shapes-part-2/

.gallery {
  --s: 70px; /* control the slanted part */
  
  display: flex;
  height: 280px; /* the height of the images*/
  gap: 8px; /* control the gap */
}
.gallery > img {
  flex: 1;
  min-width: 0;
  object-fit: cover;
  cursor: pointer;
  transition: .5s;
}
.gallery > img:hover {
  flex: 1.8; 
}
.gallery > img:first-child {
  margin-right: calc(-.5*var(--s));
  clip-path: polygon(0 0,100% 0,calc(100% - var(--s)) 100%,0 100%);
}
.gallery > img:last-child {
  margin-left: calc(-.5*var(--s));
  clip-path: polygon(var(--s) 0,100% 0,100% 100%,0 100%);
}


body {
  background: #ECD078;
}

<div class="gallery">
  <img src="https://picsum.photos/id/433/600/400" alt="A Bear">
  <img src="https://picsum.photos/id/593/600/400" alt="A Tiger">
</div>

在我看來，你把事情搞得太復(fù)雜了，這對(duì)你合適嗎？

斜線將總是占總寬度的1%

.container {
  position: relative;
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  overflow: hidden;
}

.container img {
  width: 55%;
  object-fit: cover;
}

.container img:nth-child(1) {
  clip-path: polygon(0% 0%, 100% 0%, 85% 100%, 0% 100%);
  transform: translateX(7%)
}

.container img:nth-child(2) {
  clip-path: polygon(15% 0, 100% 0%, 100% 100%, 0% 100%);
  transform: translateX(-7%)
}

<div class="container">
  <img src="https://source.unsplash.com/Ul-Cp7f_CGQ/1440x546" class="hs-media__image" />
  <img src="https://source.unsplash.com/t8QeaJkxp4M/1800x546" class="hs-media__image" />
</div>