<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/1025/300/300">
<img class="zig-zag-box" src="https://picsum.photos/id/1025/300/300" style="padding: 0;">
.zig-zag-box {
  --s: 40px;  /* control the size of the spikes */
  --w: 200px; /* preferred image width */
  
  width: round(var(--w),var(--s)); 
  aspect-ratio: 1;
  padding: calc(.75*var(--s));
  box-sizing: border-box;
  background: linear-gradient(#8C2318,#774F38);
  mask:
    conic-gradient(#000 0 0) 50%/calc(100% - var(--s)) calc(100% - var(--s)) no-repeat,
    repeating-conic-gradient(from 45deg,#0000 0,#000 1deg 89deg,#0000 25% 50%) 
     calc(var(--s)/2) 0/var(--s) var(--s);
}

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.