CSS Houdini experimental showcase by @iamvdo
Support: Chrome/Opera/Edge
No more faking with pseudo-elements and CSS transforms. And it’s responsive out of the box.
.el {
border-image-source: radial-gradient(...);
border-image-slice: 0 0 100% 0;
border-image-width: var(--separator-size);
border-image-outset: var(--separator-size);
--separator-size: 75px;
--separator-shadow: 0.35;
--separator-shadow-color: rgba(0,0,0,0.35);
--separator-shape: curve-left;
}
.el.is-loaded {
border-image-source: paint(separator)
}