GoogleChromeLabs / houdini.how

A community-driven gathering place for CSS Houdini worklets and resources.
https://houdini.how
Apache License 2.0
152 stars 39 forks source link

[angled corners] type worklet with 1 to 8 corner size option #174

Open jsnkuhn opened 2 years ago

jsnkuhn commented 2 years ago

Have a copedpen where I built on the current angled corners worklet to add 1-8 corner size option (like the slash syntax from border-radius). Not sure if this warrants it's own entry or if this can just add functionality to the current worklet?

Was ultimately looking to recreate the full functionality of the old corner-shape spec. As in add the options for different shapes at each corner (square, angle, notched, scoop). But I'm just not skilled enough with JS to do that right now.

Also looked into adding different values like % and em but golly that would be a mess (Unless I'm missing some houdini API that makes this easy?)

https://codepen.io/jsnkuhn/pen/NWgBBdO?editors=0100