Triangle With Shadow

You probably already know you can make triangles with CSS. But what if you want to put a shadow behind it? Unfortunately the classic border trick doesn't change the shape of the element, it's just a visual trick. Let's look at a couple alternative solutions.

 

Just use Unicode

There are triangle characters in unicode. Like:

▲▼◀▶

And way more.

If you use that as your triangle, you can select it and do all kinds of fancy to it.

<spanclass="triangle">▲</span>

.triangle {
   color:#BADA55;
   text-shadow:0020px black;}

Color, shadows, sizing, whatever. You could even get more fancy. If the triangle isn't the exact shape you want or doesn't point the right way, you can use CSS3 transform stuff to stretch it or rotate it. Here's a demo like that:

I like this technique, but there are some obvious issues. One is that relying on CSS3 transform features doesn't get you very deep browser support. Certainly no IE 8. But hey, this article is about shadows, so that's CSS3 anyway. Even Older browsers than that may have trouble with the unicode icons themselves. So fair warning.

The Double-Box Method

Assuming we're cool with CSS3, one method would be to have a container box with hidden overflow and another box inside it which is rotate and hangs out of it. The part that is still visible would form a triangle. Then you can use a box-shadow on both the boxes to achieve a shadow all the way around.

<divclass="triangle"></div>

.triangle-with-shadow {
   width:100px;
   height:100px;
   position: relative;
   overflow: hidden;
   box-shadow:016px10px-17px rgba(0,0,0,0.5);}.triangle-with-shadow:after {
   content:"";
   position: absolute;
   width:50px;
   height:50px;
   background:#999;
   transform: rotate(45deg);/* Prefixes... */
   top:75px;
   left:25px;
   box-shadow:-1px-1px10px-2px rgba(0,0,0,0.5);}

Notice we use negative spread radius on the parent in which to get the shadow to only come off of one side. Here's a demo like that:

Just use an image

I'm not a big fan of this, because it's an extra HTTP Request or another thing to manage in your sprite. And you'll have the "responsive images" (won't look as nice on pixel dense displays unless you have multiple versions of it ready for that and go to great lengths to fix). The other techniques are essentially drawn with vector so will be sharp in any environment.

But, you know, nobody will die and you'll get good browser support.