Triangle With Shadow

Triangle With Shadow

by: Chris Coyier

Apr 19 2012

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.

<span class="triangle">▲</span>
.triangle {
   color: #BADA55;
   text-shadow: 0 0 20px 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:

/* Shadow Triangle */

span {
  display: inline-block;   
  transform: scaleX(2.5);
  color: #BADA55;
  text-shadow: 
    0 2px 2px rgba(255,255,255,0.7), 
    0 10px 4px rgba(0,0,0,0.5);
  font-size: 32px;
}
span:hover {
  transition: all 0.2s ease;
  transform: scaleX(2.5) translateY(4px);
  text-shadow:     
    0 1px 1px rgba(0,0,0,0.5);
}

body {
  padding: 20px;
}

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.

<div class="triangle-with-shadow"></div>
.triangle-with-shadow {
   width: 100px;
   height: 100px;
   position: relative;
   overflow: hidden;
   box-shadow: 0 16px 10px -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 -1px 10px -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:

<div class=”triangle-with-shadow”></div>

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.

Linked Page

Advertisements
By Rz Rasel Posted in Css

16 comments on “Triangle With Shadow

  1. I do not even know how I ended up here, but I thought this post was great. I don’t know who you are but definitely you’re going to a famous blogger if you are not already 😉 Cheers!

  2. I do like the way you have framed this difficulty and it does present us some fodder for thought. Nonetheless, coming from what precisely I have seen, I only wish as other opinions stack on that people today continue to be on issue and not embark on a tirade regarding some other news du jour. Anyway, thank you for this excellent point and while I can not really concur with this in totality, I respect the point of view.

  3. Wow, marvelous blog layout! How long have you been blogging for? you made blogging look easy. The overall look of your web site is magnificent, let alone the content!

  4. I believe this website contains some rattling good information for everyone :D. “This is an age in which one cannot find common sense without a search warrant.” by George Will.

  5. I feel this is one of the most vital info for me. And i am happy studying your article. However wanna observation on few basic things, The site style is wonderful, the articles is in point of fact nice : D. Good task, cheers

  6. *This web site is really a walk-through for all of the info you wanted about this and didn�t know who to ask. Glimpse here, and you�ll definitely discover it.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s