Cutting shape out of div/having transparent border

Hi there,

I have the following fiddle that creates some “ticket” looking boxes. I have managed to create semi-circles on the sides of the boxes, but when I add a box shadow on hover, the semi circles appear solid rather than being cut out of the div and the shadow looks odd - you will see what I mean in the fiddle.

Is there a way to stop this happening and to have the semi-circle borders cut out? Obviously I can’t use transparent borders as nothing would happen so not sure how to do this. I’m guessing maybe clip?

Any suggestions would be great.



The widths may vary though, especially on mobile etc.

Theoretically you can change width using .svg

I guess, by having two images - left and right?

Was hoping to do it using HTML/CSS though

You can do it with radial gradients and filter for the drop shadow.



That’s great, many thanks! I didn’t think of using a gradient

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.