How to draw broken rect


I need to fill a div with a kind of “broken” rectangle. Here is a very bad image of how it should look like :smiley:

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:

Clip path generated using:



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

1 Like

Another approach is to use an SVG . . .