<div class="gallery">
  <img src="https://picsum.photos/id/152/300/300" alt="Purple flowers">
  <img src="https://picsum.photos/id/106/300/300" alt="Pink flowers">
  <img src="https://picsum.photos/id/400/300/300" alt="Some plants">
  <img src="https://picsum.photos/id/306/300/300" alt="A water lily">
</div>

.gallery {
  --s: 200px; /* control the size */
  --r: 45px;  /* control the triangular shape */
  
  display: grid;
  gap: 6px;
  grid: auto-flow var(--s)/repeat(2,var(--s));
  cursor: pointer;
}
.gallery > img {
  object-fit: cover;
  transition: .5s;
}
.gallery > img:is(:nth-child(1),:nth-child(4)) {
  width: 100%;
  height: calc(100% + var(--r));
}
.gallery > img:is(:nth-child(2),:nth-child(3)) {
  height: 100%;
  width: calc(100% + var(--r));
}
.gallery > img:nth-child(1) {
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--r)) calc(50% - var(--r)/2),100% calc(100% - var(--r)),50% 100%,0 calc(100% - var(--r)))
}
.gallery > img:nth-child(2) {
  place-self: end;
  clip-path: polygon(var(--r) 0,100% 0,100% 100%,calc(50% + var(--r)/2) calc(100% - var(--r)),var(--r) 100%,0 50%)
}
.gallery > img:nth-child(3) {
  clip-path: polygon(0 0,calc(50% - var(--r)/2) var(--r),calc(100% - var(--r)) 0,100% 50%,calc(100% - var(--r)) 100%,0 100%)
}
.gallery > img:nth-child(4) {
  place-self: end;
  clip-path: polygon(0 var(--r), 50% 0,100% var(--r),100% 100%,0 100%,var(--r) calc(50% + var(--r)/2))
}
.gallery:hover {
  --r: 0px;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  background: #ECD078;
}