CSS3 도형(원, 삼각형)을 빠르게 그릴 수 있는 SASS 믹스인: Create Configurable CSS3 Shapes with SASS Mixins

_shapes.scss

// CSS3 둥근 테두리
// https://developer.mozilla.org/ko/docs/CSS/border-radius
@mixin border-radius ($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}

// CSS3 배경 위치 설정
// http://www.css3.info/preview/background-origin-and-background-clip/
// http://caniuse.com/#search=background-origin
// 배경 위치 설정의 기준은 background-image 이미지 설정의 원점
// background-attachment: fixed; 일 경우 background-origin은 무시됨.
// https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment
@mixin background-origin ($origin: padding-box) {
    -webkit-background-origin: $origin;
    -moz-background-origin: $origin;
    background-origin: $origin;
}

// CSS3 배경 다듬기
// http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed
// https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
@mixin background-clip ($content: padding-box) {
    -webkit-background-clip: $content;
    -moz-background-clip: $content;
    background-clip: $content;
}

// 사용자 정의 믹스인: 원 도형 만들기
// 
@mixin circle ($diameter: 10px, $bgcolor: black) {
    width: $diameter;
    height: $diameter;
    background: $bgcolor;
    @include border-radius($diameter/2);
    @include background-clip;
}

// 사용자 정의 믹스인: 삼각형 도형 만들기
// http://css-tricks.com/snippets/css/css-triangle/
@mixin triangle ($base, $direction, $bgcolor) {
    width: 0;
    height: 0;
    $half-base: $base/2;
    @if $direction == up {
        border: {
            left: $half-base solid transparent;
            right: $half-base solid transparent;
            bottom: $half-base solid $bgcolor;
        }
    }
    @else if $direction == bottom {
        border: {
            left: $half-base solid transparent;
            right: $half-base solid transparent;
            top: $half-base solid $bgcolor;
        }
    }
    @else if $direction == left {
        border: {
            top: $half-base solid transparent;
            bottom: $half-base solid transparent;
            right: $half-base solid $bgcolor;
        }
    }
    @else {
        border: {
            top: $half-base solid transparent;
            bottom: $half-base solid transparent;
            left: $half-base solid $bgcolor;
        }
    }
}

// 사용자 정의 믹스인(단축): 빠른 삼각형 도형 만들기
@mixin triangle-top ($base, $bgcolor) {
    @include triangle($base, top, $bgcolor);
}
@mixin triangle-right ($base, $bgcolor) {
    @include triangle($base, right, $bgcolor);
}
@mixin triangle-bottom ($base, $bgcolor) {
    @include triangle($base, bottom, $bgcolor);
}
@mixin triangle-left ($base, $bgcolor) {
    @include triangle($base, left, $bgcolor);
}