How to draw broken rect

[Thallius]

Hi,

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?

[DaveMaxwell]

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/

[Thallius]

Thanks,

that looks like what I am searching for. Will play around with it tomorrow.

[Archibald]

Another approach is to use an SVG . . .