The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS beveled corner with box shadow

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #38658

    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?


    here’s something that you may be able to tweek:


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

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.