<div class="zig-zag-box">Lorem ipsum dolor sit amet, consect etur adip iscing elit. Mae cenas vo lutpat condim </div>
<img class="zig-zag-box" src="https://picsum.photos/id/1016/300/300">
<img class="zig-zag-box" src="https://picsum.photos/id/1016/300/300" style="padding: 0;">

/* HTML: <div class="zig-zag-box"></div> */
.zig-zag-box {
  --s: 12px;  /* control the size of the spikes */
  --w: 210px; /* preferred image width */
  
  width: round(var(--w),4*var(--s)); 
  aspect-ratio: 1;
  object-fit: cover;
  padding: calc(2*var(--s));
  box-sizing: border-box;
  background: linear-gradient(60deg,#0B486B,#C54050);
  --_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));
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  grid-auto-flow: column;
  gap: 20px;
  color: #fff;
}