CODEWITHSUNDEEP
htmlcssshadow
at.
at.

Reputation: 52570

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?

Upvotes: 12

Views: 19283

Answers (6)

Mayko
Mayko

Reputation: 439

Probably the best option is using filter:

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

Upvotes: 3

thebossman
thebossman

Reputation: 4698

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.

Upvotes: 4

Web_Designer
Web_Designer

Reputation: 74630

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;
}

Upvotes: 1

Marcel
Marcel

Reputation: 28097

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

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

Upvotes: 1

eveevans
eveevans

Reputation: 4460

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

Upvotes: 4

ted
ted

Reputation: 5329

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;

Upvotes: 6

Related Questions