I need to fill a div with a kind of “broken” rectangle. Here is a very bad image of how it should look like
The rect-parts on the left and the right must be filled with a color which I can define. the “broken” part in the middle must be transparent
As this form can have multiple colors sizes etc I need to draw it and cannot use images.
Has someone a solution for this?
I’m guessing you’re going to have an image underneath the broken rectangles?
I’d use the :before and :after to add rectangles to the image, then use clip path to tweak the path
Very quick and dirty example: https://codepen.io/davemaxwell/pen/RwJEpzM
Clip path generated using: https://www.cssportal.com/css-clip-path-generator/
that looks like what I am searching for. Will play around with it tomorrow.
Another approach is to use an SVG . . .