Tool for creating something with the shape() function?
Does anyone know if there's a tool, like Clippy, but for the newly available shape() function? I'm interested in creating this trapezoid with rounded corners and arcs. https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape/shape
MDN Web Docs
shape() - CSS: Cascading Style Sheets | MDN
The shape() CSS function is used to define a shape for the clip-path and offset-path properties. It combines an initial starting point with a series of shape commands that define the path of the shape. The shape() function is a member of the <basic-shape> data type.
3 Replies
You might try Firefox browser dev tool: they have a path editor for adjusting clip-path: path(), ellipse(), polygon(). Although they just added browser support to use it so idk if they'll have added it to the Path Editor in dev tools.
This video has s chapter at 1:46 that illustrates how the tool works
https://youtu.be/ybW7yUbOHN8?si=vnIWNBKWrb-Cizft
CSS Weekly
YouTube
Creative Section Breaks Using CSS Clip-Path
Learn how to use CSS clip-path and Clip Path editor in Firefox DevTools to create beautiful, fluid section breaks, dividers, and separators.
🔗 Links
Demo: https://codepen.io/ZoranJambor/pen/vYjKoOw/d375ef391d10cc4f4219ae82419d27bc
Clip-Path on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
Clip-Path Converter: https://yokse...
Yeah, but unfortunately,
shape() isn't supported in FF.