I’m trying to find the best method for building unique border shapes in HTML/CSS, for example:
The goal is to be able to have this responsive so width/height can change to anything, but have a fixed size for the parts of the shape that are marked red, like the cut corners and notch on the left side.
I attempted to use clip-path with an inner div to create a border, but this falls apart with more complex shapes, like the notch on the left side. clip-path also doesn’t allow for rounding without using an SVG filter that introduces other artifacts to more complex shapes, and doesn’t allow for precise control of the corner radius.
I know this isn’t a Webflow-specific question, but if anyone’s attempted this please let me know!
Here is my site Read-Only: LINK
(how to share your site Read-Only link)