CSS beveled corner with box shadow

[lee]

I’m trying to do something pretty tricky: a CSS beveled corner with a box shadow. I would like to find a purely CSS solution, but I am open to using Javascript (though I haven’t found any useful scripts for such a thing so far). I know I can do it with images, but if that’s the only way then I’m not going to do it at all.

Right now I have a drop-down menu that looks like this:

And I would like for it to look like this (rendered in Photoshop):

I have been able to get to the point of having the folded yellow corner using only CSS, but I cannot find a way around the box shadow (using the transparent border trick means that the box shadow still follows the invisible corner, not the bevel.

I wonder if using an icon font to represent the corner with a text-shadow applied would be a possibly, but I don’t know enough about creating custom icon fonts for something like this.

Any ideas for a way to do this?

[wolfcry911]

here’s something that you may be able to tweek:
http://codepen.io/wolfcry911/pen/AHbEB

[lee]

Awesome, I can definitely work with this. Thanks, this has been driving me nuts for weeks.

[Author]

Posts