Search code examples
htmlcssshadow

CSS box shadow around triangle

I need to create a triangle with a drop shadow using simple html and css. Answered by another stackoverflow question, I was able to create the triangle with mitered borders. Basically I create 1 side of a box with a very wide border and the nearby side with a wide transparent border:

div.triangle {
    border-bottom : 60px solid transparent;
    border-left : 60px solid black;
}

works great, but when I try to apply a box-shadow the shadow goes around the enclosing square... not the triangle:

div.triangle {
    border-bottom : 60px solid transparent;
    border-left : 60px solid black;
    -webkit-box-shadow: 0 0 10px black;
}

How do I get a triangle using only css/html with a drop shadow?

Solution

  • Seems like impossible. Definitely using an imagine is much more easier solution. I've made something like triangle :) http://jsfiddle.net/5dw8M/109/ . Sorry cannot leave a comment under your post. May be it'll serve like an inspiration for someone;