CSS arrow please

    =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

Re: CSS arrow please

#6

Post by mikegerwitz » Wed, May 09, 2012, 12:53 PM UTC

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".

Re: CSS arrow please

#7

Post by jacobr » Wed, May 09, 2012, 12:59 PM UTC

jenius wrote: post #5

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 transp…

I normally use SCSS, but this should work as well.

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

Re: CSS arrow please

#8

Post by anons2011 » Wed, May 09, 2012, 1:03 PM UTC

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

Re: CSS arrow please

#9

Post by tomelders » Wed, May 09, 2012, 1:05 PM UTC

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

Re: CSS arrow please

#10

Post by ericax » Wed, May 09, 2012, 1:06 PM UTC

Arrow is repeated too many times nowadays. Neat.