Craft Web Design + Development
Brendan McKeown

Hey there. I’m a front-end developer and web designer. I'm all about creating websites and web apps that look and perform flawlessly on any device using HTML, CSS, and Javascript. I enjoy utilizing libraries, frameworks and preprocessors that improve efficiency and reduce confusion.

Check out my resume.

Triangle Shape Generator Mixin

Until CSS shapes are generally supported, this Sass mixin will create those triangle shapes you need out of plain-ol' borders. It's great for making navigational arrows or those tiny design elements without having to create an image. Since it only uses borders, you don't have to worry about any browsers not being able to render them.

/**
 * Make a triangle shape with borders!
 *
 * @param $point - top, right, bottom, left
 * @param $color - e.g. #333 or blue or rgba(0,0,0,.5)
 * @param $size - e.g. 2px - from point to base
 */
@mixin triangle($point, $color, $size) {
    $adjacent: opposite-position($point);
    border: $size solid transparent;
    border-#{$adjacent}: $size solid $color;
    border-#{point}: 0;
    display: block;
    height:0;
    width:0;
}

// usage example:
.next-arrow {
    @include triangle(right, black, 10px);
}

Try it out on jsFiddle.