CSS box shadow around triangle

Question

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

Answer 1

Create a duplicate of that triangle, decolorize it, give it a negative z-index value using css, and finally off center it with CSS positioning.

div.triangle {
z-index:-1;
position:relative;
bottom:-16px;
right:-16px;
}

Answer 2

You can use the "transform" property to rotate a square 45 degrees and hide half of it, but not all browsers support it, so you'll need a fallback.

.triangle-with-shadow {
   width: 100px;
   height: 50px;
   position: relative;
   overflow: hidden;
   box-shadow: 0 16px 10px -15px rgba(0,0,0,0.5);
}
.triangle-with-shadow:after {
   content: "";
   position: absolute;
   width: 50px;
   height: 50px;
   background: #999;
   transform: rotate(45deg);
   -ms-transform:rotate(45deg); /* IE 9 */
   -moz-transform:rotate(45deg); /* Firefox */
   -webkit-transform:rotate(45deg); /* Safari and Chrome */
   -o-transform:rotate(45deg); /* Opera */
   top: 25px;
   left: 25px;
   box-shadow: -1px -1px 10px 0px rgba(0,0,0,0.5);
}​

Demo on jsfiddle.

Lifted from this CSS Tricks page with modifications.

Answer 3

What about put another div with similar property and play with positions? something like http://jsfiddle.net/eveevans/JWGTw/

Answer 4

Probably the best option is using filter:

filter: drop-shadow(0 0 10px black);

Answer 5

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;

Answer 6

Would <canvas> with a PNG fallback be an option?

Demo: jsfiddle.net/Marcel/3dbzm/1