Trigger
Spoke with a collegue at Kisko about a design he was approaching in webflow. Basically the buttons have chevrons on each end, but each corner of the poly that is created is rounded a certain amount. Relatively easy to create in Figma, but very difficult to pull of as semantic html.
His solution in Webflow was to use a Click Group? (spelling, wrong word). He didn’t like using it. But we tested a lot of the ways to use a11y and it seems that it worked with most.
So I explored a bit this idea with claude (TODO: link session). It has some limitations.
Solution is to use pseudo elements with svgs. Not ideal as you might want to set the color of the button or use a gradient.
clip-path could also be used, but doesn’t support curves or rounding. Brute force approach might be to render the curve high res enough it looks good.
Similar issue with Irregular poly section headers and footers. Meaning a section that is a certain color and say there is this irregular top to it and bottom.
2025-04-07 He discussed his approach using SVG backgrounds at the top and bottom and used an absoluted div to fill the rest of the color (excluding the top and bottom)
-maybe-publishable css-tricks (ran similar article below in 2020) or smashing mag
CSS Tricks article: Creating Non-Rectangular Headers Author: Erik Kennedy
also worth exploring mask-image
also worth exploring are there any experimental features that could be used for this?
why it matters
- design/dev handoff conversations
- limitations for no-code tools
- how CSS can extend design intent