<img src="https://picsum.photos/id/188/300/300">
<img src="https://picsum.photos/id/407/300/300">
<img src="https://picsum.photos/id/122/300/300">
<img src="https://picsum.photos/id/43/300/300">
<img src="https://picsum.photos/id/274/300/300">
<img src="https://picsum.photos/id/670/300/300">

img {
  --s: 14px;  /* control the size of the spikes */
  
  width: calc(3*4*var(--s));
  aspect-ratio: 1;
  object-fit: cover;
  padding: calc(2*var(--s));
  background: #3B8686;
  --_m:#0000 0 calc(2*atan(.5)),#000 0 50%;
  mask:
    repeating-conic-gradient(from atan(2) at 50% var(--s),var(--_m))
     calc(2*var(--s)) calc(-1*var(--s))/calc(4*var(--s)) 100% intersect,
    repeating-conic-gradient(from atan(-.5) at var(--s),var(--_m))
     calc(-1*var(--s)) calc(2*var(--s))/100% calc(4*var(--s));
}
img:nth-of-type(2) {
  translate: 0 calc(-2*var(--s));
  width: calc(4*4*var(--s));
  height: calc(3*4*var(--s));
}
img:nth-of-type(4) {
  translate: calc(2*var(--s)) 0;
}
img:nth-of-type(5) {
  translate: 0 calc(-2*var(--s));
  margin: auto;
  height: calc(4*4*var(--s));
}
img:nth-of-type(6) {
  translate: calc(-2*var(--s)) 0;
}


body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  grid-template-columns: repeat(3,auto);
  background: #F2E9E1;
}