I am a Web Designer and Developer
working at GitHub

I’ve come across a few techniques and tips in my career, while working at my last gig a co-worker pointed me to this technique. I believe this was originally discovered by the legendary Eric Meyer, but I couldn’t find much documentation about it on the web. Which is why I am sharing it here.

The details

Few people realize when a browser draws the borders, it draws them at angles. This technique takes advantage of that. One side of the border is colored for the color of the arrow, and the rest are transparent. Then you set the width of the border to something large, the ones above are 20px. To demonstrate here is a div with all sides colored.

Example

<div class="css-arrow-multicolor"></div>
<style type="text/css">
  .css-arrow-multicolor {
    border-color: red green blue orange;
    border-style:solid;
    border-width:20px;
    width:0;
    height:0;
  }
</style>

As you can see there are triangles hidden in that square. These triangles are right triangles with a little tweaking with the border sizes you can get acute triangles.

Example

<div class="css-arrow-acute"></div>
<style type="text/css">
  .css-arrow-acute {
    border-color: red green blue orange;
    border-style:solid;
    border-width:25px 10px 15px 30px;
    width:0;
    height:0;
  }
</style>

With a little creativity and tweaking there are lots of shapes that can be made.

Example border-style: dotted;

<div class="css-arrow-multicolor" style="border-style:dotted;"></div>

Example border-style: dashed;

<div class="css-arrow-multicolor" style="border-style:dashed;"></div>

Example border-style: outset;

<div class="css-arrow-multicolor" style="border-style:outset;"></div>

Example border-style: inset;

<div class="css-arrow-multicolor" style="border-style:inset;"></div>

Example border-style: ridge;

<div class="css-arrow-multicolor" style="border-style:ridge;"></div>

Example border-style: groove;

<div class="css-arrow-multicolor" style="border-style:groove;"></div>

Example border-style: double;

<div class="css-arrow-multicolor" style="border-style:double;"></div>

Now for application:

Demo

<div class="chat-bubble">
  Buongiorno!
  <div class="chat-bubble-arrow-border"></div>
  <div class="chat-bubble-arrow"></div>
</div>

This is a classic chat bubble, no images used.

This technique doesn’t work in ie6 as is, mainly because ie6 doesn’t allow transparent borders, but there is a fix for that. What you need to do is give the “transparent” sides a completely different color like pink and then use filter: chroma to turn that color transparent.

/* IE6 */
.chat-bubble-arrow {
  _border-left-color: pink;
  _border-bottom-color: pink;
  _border-right-color: pink;
  _filter: chroma(color=pink);
}