<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.