sass
유용 믹스 Scss

경계선이있는 순수한 css3 포인터 화살표

!!! 컨테이너는 상대적으로 또는 절대적으로 배치되어야한다.

$ direction - 위쪽, 아래쪽, 왼쪽, 오른쪽

$ margin - 가장자리의 $ 방향 마진. 위쪽과 아래쪽 방향은 왼쪽에서 오른쪽입니다. 왼쪽과 오른쪽은 위에서 아래로입니다.

$ colors - 첫 번째는 테두리 색상이고, 두 번째는 배경 색상입니다 (부모의 배경색을 상속하는 것이 더 나을 수도 있음).

$ arrowSide - 화살표의 상대 크기입니다.

$ isInset - 화살표가 내부 (true) 또는 컨테이너 외부에 있음

다음은 작동중인 Plunker입니다. https://plnkr.co/edit/PRF9eLwmOg8OcUoGb22Y?p=preview

%pointer-core {
    content: " ";
    position: absolute;
    border: solid transparent;
    z-index: 9999;
}

@mixin pointer($direction, $margin: 10px, $colors: (#999, $gray), $arrowSide: 8px, $isInset: false){

    $opposites: (
        top: bottom,
        bottom: top,
        left: right,
        right: left
    );

    $margin-direction: (
        top: left,
        bottom: left,
        left: top,
        right: top
    );

    &:before {
        @extend %pointer-core;
        border-width: $arrowSide;

        @if $isInset {
            border-#{$direction}-color: nth($colors, 1);
            #{$direction}: -1px;
        }
        @else
        {
            border-#{map-get($opposites, $direction)}-color: nth($colors, 1);
            #{map-get($opposites, $direction)}: 100%;
        }

        #{map-get($margin-direction, $direction)}: 0;

        margin-#{map-get($margin-direction, $direction)}: $margin - 1;
    }

    &:after {
        @extend %pointer-core;
        border-width: $arrowSide - 1;

        @if $isInset {
            border-#{$direction}-color: nth($colors, 2);
            #{$direction}: -1px;
        }
        @else
        {
            border-#{map-get($opposites, $direction)}-color: nth($colors, 2);
            #{map-get($opposites, $direction)}: 100%;
        }

        #{map-get($margin-direction, $direction)}: 0;

        margin-#{map-get($margin-direction, $direction)}: $margin;
    }
}

툴팁 포인터 예제

$color-purple-bg: #AF6EC4;
$color-purple-border: #5D0C66;

    
$color-yellow-bg: #E8CB48;
$color-yellow-border: #757526;

.tooltip {
    position: relative;
    
    &--arrow-down {
        @include pointer('bottom', 30px, ($color-purple-border, $color-purple-bg), 15px);
    }
    
    &--arrow-right {
        @include pointer('right', 60px, ($color-yellow-border, $color-yellow-bg), 15px);
    }
}