Clip Path

by CreativeDreams

HTML

<section>
  <div>
    Donec convallis, elit vitae ornare cursus, libero purus facilisis felis, a volutpat metus tortor bibendum elit. Integer nec mi eleifend, fermentum lorem vitae, finibus neque.  
  </div>
  
  <div>
    <img src="https://demo.creativethemes.com/blocksy/pottery/wp-content/uploads/2024/02/home-hero.webp" alt="">
    
    <svg height="0" width="0">
      <defs>
        <clipPath id="svgPath" clipPathUnits="objectBoundingBox">
          <path fill="#FFFFFF" d="M.5441.0882v.80154c0,.01218-.00987.02205-.02205.02205H.05899c-.01218,0-.02205-.00987-.02205-.02205V.0882c0-.01218.00987-.02205.02205-.02205h.46307c.01218,0,.02205.00987.02205.02205ZM.73153.15436h-.1323c-.01218,0-.02205.00987-.02205.02205v.80154c0,.01218.00987.02205.02205.02205h.1323c.01218,0,.02205-.00987.02205-.02205V.17641c0-.01218-.00987-.02205-.02205-.02205ZM.94101,0h-.1323c-.01218,0-.02205.00987-.02205.02205v.80154c0,.01218.00987.02205.02205.02205h.1323c.01218,0,.02205-.00987.02205-.02205V.02205c0-.01218-.00987-.02205-.02205-.02205Z"/>
        </clipPath>
      </defs>
    </svg>
  </div>
</section>

CSS

section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  gap: 50px;
  padding: 50px;
}

img {
  width: 100%;
  height: auto;
  max-width: 100%;
  background-color: #201D1D;
  
  clip-path: url(#svgPath);
  object-fit: cover;
}