Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

CSS arrow please

cssarrowplease.com

Post reply on HN
Print view View original

11–20 of 76 posts

Re: CSS arrow please

#11

Post by philo23 »

chazandchaz wrote: post #3

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

That's probably because the CSS pixel resolution isn't matching the device/screen resolution so you're seeing the edge of two elements that don't quite match (imagine a percentage being rounded). If the page included a meta viewport tag with the correct default zoom level there would probably be no line (not tested) until you zoomed in or out.

Re: CSS arrow please

#12

Post by stuff4ben »

mikegerwitz wrote: post #6

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

I still don't get it. What do you mean that "borders are styled in such a way that they angle toward the edges if the border is large enough"? What causes the angle?

Re: CSS arrow please

#13

Post by growt »

stuff4ben wrote: post #12
mikegerwitz wrote: post #6

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

I still don't get it. What do you mean that "borders are styled in such a way that they angle toward the edges if the border is large enough"? What causes the angle?

Take a look at this: http://jtauber.github.com/articles/css-hexagon.html

Re: CSS arrow please

#14

Post by oe »

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.

Re: CSS arrow please

#15

Post by diminish »

jacobr wrote: post #7
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

css, sass and scss rocks. all those ideas should have their place in css3 or later.

Re: CSS arrow please

#16

Post by mikegerwitz »

stuff4ben wrote: post #12
mikegerwitz wrote: post #6

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

I still don't get it. What do you mean that "borders are styled in such a way that they angle toward the edges if the border is large enough"? What causes the angle?

growt's link does an excellent job of illustrating it.

Ultimately, how the border is joined at the corners is undefined by the specification:

  http://www.w3.org/TR/css3-background/#border-style
> Note: This specification does not define how borders of different styles should be joined in the corner. [...]

Many rendering engines will join borders at an angle, producing those diagonal lines.

Re: CSS arrow please

#17

Post by rralian »

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 . This is so much more semantic, elegant, and awesome. I love it!

Re: CSS arrow please

#19

Post by kapowaz »

oe wrote: post #14

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.

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?

Post reply on HN