CSS arrow please

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).<p>Clickable: <a href="https://gist.github.com/2644661" rel="nofollow">https://gist.github.com/2644661</a><p><pre><code> .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; } }</code></pre>

For those who enjoy sass:<p><pre><code> =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</code></pre>

I love the creativity that results from CSS' limitations (or, arguably, its flexibility). Neat trick.<p>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:<p><pre><code> \ / / \ </code></pre> 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".

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.<p>Thanks!

This is great so long as you don't still have to support IE7.<p><a href="http://css-tricks.com/browser-support-pseudo-elements/" rel="nofollow">http://css-tricks.com/browser-support-pseudo-elements/</a>

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 &#60;div class="arrow arrow-left"&#62;&#60;div class="arrow-inner arrow-inner-left"&#62;&#60;/div&#62;&#60;/div&#62;. This is so much more semantic, elegant, and awesome. I love it!

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: <a href="http://nicolasgallagher.com/pure-css-speech-bubbles/demo/" rel="nofollow">http://nicolasgallagher.com/pure-css-speech-bubbles/demo/</a><p>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.<p>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.<p>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: <a href="https://gist.github.com/2645575" rel="nofollow">https://gist.github.com/2645575</a>

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.

<a href="http://news.ycombinator.com/item?id=3948850" rel="nofollow">http://news.ycombinator.com/item?id=3948850</a>