CSS Houdini experimental showcase by @iamvdo
Support: Chrome/Opera/Edge
As the corner shapes demo, let’s end with rounded avatars. Build your own regular polygon, right from CSS.
.el {
background: url(...);
border-radius: 50%;
}
@supports (background: paint(id)) {
.el.is-loaded {
border-radius: 0;
mask-image: paint(avatar-polygon);
--avatar-sides: 12;
--avatar-angle: 0deg;
}
}