Question 174860 in Html Question posted in
Some basic documentation can be found here.

Html – 2 images side by side, clip-path messes up when responsive

I been stuck on this for a while but I cant figure out how to do this correctly.

My wanted result is to have two images side by side and a gap between them.

My problem is that when the browser resize it wont keep the gap and the images "merge" or extending the browser the gap gets bigger.

enter image description here

code:

.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>
Tags:

2

Answers


  1. 0

    To me it looks like you are complicating it too much, is this ok for you ?

    diagonal slash will always take 1% of total width

    .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>
    Login or Signup to reply.
  2. 0

    I have a detailed article about such layouts where you can also have hover effect: 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search