How to draw broken rect

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 :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: https://codepen.io/davemaxwell/pen/RwJEpzM

Clip path generated using: https://www.cssportal.com/css-clip-path-generator/

4 Likes

Thanks,

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

1 Like

Another approach is to use an SVG . . .

2 Likes