chrisacky on 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).

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

scizo 14y

You might also want to consider explicitly setting the box-sizing to content-box. I know that is the default, but if someone attempted to use this and had already adjusted the box-sizing to something else it would not work.

esrauch 14y

There are dozens of rules someone could already have on the page that would break it, why make a special case for box-sizing?

Skalman 14y

Because it's not unheard of to set * { box-sizing: border-box; }. In the same way, you shouldn't assume margin, padding or font-size to be anything in particular.

Comments