Cutting shape out of div/having transparent border

HTML & CSS
1

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.

Thanks!

2

SVG?

3

The widths may vary though, especially on mobile etc.

4

Theoretically you can change width using .svg

5

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

Was hoping to do it using HTML/CSS though

6

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

e.g.

3 Likes
7

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

1 Like
8

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