纯 css3 指针箭头与轮廓边框

Created: November-22, 2018

！容器应相对或绝对定位

$direction - 顶部，底部，左侧，右侧

$margin - $direction 边缘的边距。对于顶部和底部方向 - 它是从左到右。对于左和右 - 它是从上到下。

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

！ 容器应相对或绝对定位

！容器应相对或绝对定位