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

21–30 of 76 posts

Re: CSS arrow please

#21

Post by gioele »

rralian wrote: post #17

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

I would not call this _more semantic_.

It is definitely a very cool and clean hack (more of these on HN, please), but not semantic at all: in the source there is not indication that the box is pointing at something or where it is pointing.

Looking at the domain name I thought it was a public request for a new CSS property like

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

Re: CSS arrow please

#22

Post by chrisacky »

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; }
    }

Re: CSS arrow please

#23

Post by richardlblair »

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!

Re: CSS arrow please

#25

Post by etherealG »

growt wrote: post #13
stuff4ben wrote: post #12

Earlier quoted context omitted.

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

thanks, that's a much better explanation

Re: CSS arrow please

#26

Post by avgarrison »

growt wrote: post #13
stuff4ben wrote: post #12

Earlier quoted context omitted.

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

Thanks, I had no clue how this trick worked until I saw your link.

Re: CSS arrow please

#28

Post by raganwald »

anons2011 wrote: post #8

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

The demo page is broken in IE8

I prefer to say that “IE8 is broken when attempting to render the demo page,” but either way, good catch.

Re: CSS arrow please

#29

Post by cfontes »

kapowaz wrote: post #19
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?

This made me to the sky and back to hell in one second.

I need to do exactly this in a google maps infobox, BUT with the dawn shadow... :( back to images I guess.

Re: CSS arrow please

#30

Post by mcsheffrey »

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.

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