<img src="https://kryogenix.org/images/css-jagged-banner.jpg">
<img src="https://kryogenix.org/images/css-jagged-ct.png">
<img src="https://kryogenix.org/images/css-jagged-brum.jpg">
img {
-webkit-mask-image: linear-gradient(
to bottom right,
white,
white 50%,
transparent 50%,
transparent),
linear-gradient(
to top,
transparent 30px,
black 30px,
white);
mask-image: linear-gradient(
to bottom right,
white,
white 50%,
transparent 50%,
transparent),
linear-gradient(
to top,
transparent 30px,
black 30px,
white);
-webkit-mask-size: 30px 30px, 100% 100%;
mask-size: 30px 30px, 100% 100%;
-webkit-mask-repeat: repeat-x;
mask-repeat: repeat-x;
-webkit-mask-position: left bottom;
mask-position: left bottom;
display: block;
margin-bottom: 0.5em;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.