I've also just converted to LessCSS mixin. Free for your use. (I added a 6th argument so that you can change the class name that gets generated).

Clickable: https://gist.github.com/2644661

    .arrowgasm(@position: top, @size : "4px", @background-color :  #88b7d5, 
       @border-width: "2px", @border-color : #c2e1f5, @arrowClass : "arrow_box"){
      
         (~".@{arrowClass}") {
            position: relative;
            background: @background-color;
            border: @size solid @border-color;
        }
        (~".@{arrowClass}:after"), (~".@{arrowClass}:before") {
                bottom: 100%;
                border: solid transparent;
                content: " ";
                height: 0;
                width: 0;
                position: absolute;
                pointer-events: none;
        }

        (~".@{arrowClass}:after") {
                .b(@position, @background-color);
                border-width: @size;
                left: 50%;
                margin-left: @size * -1;
        }
        (~".@{arrowClass}:before") {
               .b(@position, @border-color);
                border-width: @size + @border-width ;
                left: 50%;
                margin-left: ( @size + @border-width ) * -1;
        }
        .b(top, @border-color)   { border-bottom-color: @border-color; }
        .b(right, @border-color) { border-left-color: @border-color;   }
        .b(bottom, @border-color){ border-top-color: @border-color;    }
        .b(left, @border-color)  { border-right-color: @border-color; }
    }

For those who enjoy sass:

    =triangle($direction: up, $size: 10px, $color: #000)
      width: 0
      height: 0
      @if $direction == up
        border-left: $size solid transparent
        border-right: $size solid transparent
        border-bottom: $size solid $color
      @else if $direction == down
        border-left: $size solid transparent
        border-right: $size solid transparent
        border-top: $size solid $color
      @else if $direction == left
        border-top: $size solid transparent
        border-bottom: $size solid transparent
        border-right: $size solid $color
      @else if $direction == right
        border-top: $size solid transparent
        border-bottom: $size solid transparent
        border-left: $size solid $color

    =triangle($direction: top, $size: 10px, $color: #000)
      width: 0
      height: 0
      border: $size solid transparent
      border-#{$dir}-color: $color

I love the creativity that results from CSS' limitations (or, arguably, its flexibility). Neat trick.

It took me a moment to realize exactly what was going on to make this work. For those interested: borders are styled in such a way that they angle toward the edges if the border is large enough:

  \ /
  / \

That gives you four "V"s to work with. Therefore, to create the arrow, you simply need to hide all but the appropriate border. The border around the arrow is accomplished by underlaying another "V".

  http://www.w3.org/TR/css3-background/#border-style

This is the way to do it, until the graphics guy wants the box to have a drop shadow. The pseudo elements' shadow is square, so your options are either to hope that nobody notices that the arrow doesn't have a shadow (like in this example), or to use an image for the arrow.

I really suck at CSS. I mean, I really suck. It takes me forever to accomplish the smallest things. I love these sites that keep popping up that generate CSS for cool little effects.

Thanks!

This is great so long as you don't still have to support IE7.

http://css-tricks.com/browser-support-pseudo-elements/

That's so funny... just yesterday I built my own sass mixin to create custom triangles to do the little arrow pointer on a dialog box like this. Two triangles (border color and background color) with an offset. I toyed with using :before and/or :after to create the second background-color triangle, but the specs said you could only do text or an image so I didn't even try to make the triangle. My version required something like <div class="arrow arrow-left"><div class="arrow-inner arrow-inner-left"></div></div>. This is so much more semantic, elegant, and awesome. I love it!

  p {
      border-bottom-right-cap: solid-arrow-outward;
  }

This needs 2 easy additions, a slider to move the arrow closer to either corner of the edge it's on and a slider to change how big the arrow is.

I made a bunch of this kind (and more complex) speech bubbles a couple of years ago: http://nicolasgallagher.com/pure-css-speech-bubbles/demo/

This is a nice little tool to help automate the production of the code for simple ones.

Because the shadow seems to be setup so that the light source is at the top, when you move the arrow to any other position, the lack of shadow under the arrow becomes noticeable.

If the light source moved along with the triangle, no shadow under the arrow would be required (imo).

I've been writing CSS for a couple of years now and it took me like 10 minutes to understand why this is even working.

I already feel sorry for anyone that will be debugging this mess.

Has a small line running through the arrow on safari (mobile). FYR

The harder thing is getting the boxshadow to work on that.

I posted a Sass mixin for doing this here: https://gist.github.com/2645575

Browser support? Any idea if this works in IE7/8?

Arrow is repeated too many times nowadays. Neat.

The demo page is broken in IE8, although it does work when you copy the HTML/CSS to a new file.

waste of a domain name, why do people create a whole new domain name for something as simple as this, this could have easily been a blog post! (IMO)

Brilliant, I have a use case for this, nice timing :-)

Thank you sir! This might come in handy sometimes.

Loved the tool !!

Finally.

May I request that the arrow has a drop shadow too. I mean this is not exactly rocket science, but the drop shadow will be much tougher.

wrap it up in a cocoa app please, so I can use it when I'm not online.

Here's a quick hack for a CSS arrow that casts a shadow. http://jsfiddle.net/BKtnn/1/

Adding border is a bit problematic but I'm sure solution could be found, just a question of few more minutes. Also, it should be doable in IE with filters.

The gathered troops here were all cooing at this demo until the drop shadow was noticed as absent from the arrow. A real shame (although obviously the box-shadow being bounded by the rectangle makes it impossible to do this way).

Maybe it's time to propose a mask-shadow property?

This sort of thing used to happen a lot at an Android app company I worked for. It would be easier and cleaner to implement something like a button background in XML, but it wouldn't look nearly as good as a button produced using real graphics. It wasn't just looks either, they were less usable in that case. If a button doesn't look 3D due to being limited to a simple linear gradient or something then users are less likely to click it, and we did have user testing reports of people mistaking the biggest buttons that we wanted people to click most for section titles. So even if a shadow can be pulled off, what else is missing that a raster graphics solution would include. ;/

You know, not having a shadow on the Arrow (if arrow is on bottom) kind looks like it's popping off the page then, at a slight angle. I don't mind it - tho obviously not for every use.

Here's a method I use for getting box-shadows on the arrow http://tinkerbin.com/cRhPGwmh