Skip to content

Instantly share code, notes, and snippets.

@lonekorean
Last active March 7, 2018 21:22
Show Gist options
  • Save lonekorean/1cb592f00e52cae0cee39114b14f8ecb to your computer and use it in GitHub Desktop.
Save lonekorean/1cb592f00e52cae0cee39114b14f8ecb to your computer and use it in GitHub Desktop.
Using a paint worklet as a mask
.jagged {
--tooth-width: 80px;
--tooth-height: 30px;
-webkit-mask-image: paint(jagged-edge);
/* other styles as needed... */
}
.slot:nth-child(1) .jagged {
background-image: linear-gradient(to right, #22c1c3, #fdbb2d);
}
.slot:nth-child(2) .jagged {
/* pixel art from Iconoclasts, fun game! http://www.playiconoclasts.com/ */
background-image: url('iconoclasts.png');
background-size: cover;
background-position: 50% 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment