带边框的三角箭头实现方法

在上一篇文章中，主要观摩学习了淘宝的“>” 实现，开拓了自己的思路。
顺便总结一下自己，有时会做不代表做的好，跟高中数学一样，一道题会有好几种解法（提起数学就有种淡淡的忧桑...）；在前端中更是如此，有时仅仅是为了完成任务，很少考虑过更优的解决方法，So~利用上篇总结的方法，尝试一些改变，举一反三。

史前

现有项目中的组件poptip

图片已挂，待更新。

注意这些poptip的小三角，以前用的笨方法就是切图。很显然，这是个非常蛋疼的方法，因为：

1. 不同状态的poptip意味着不同颜色的小三角，以上图为例，4个状态下的poptip就要对应要切4个不同颜色的三角箭头；
2. 不同状态下三角箭头的方向可能不一样，上下左右...那么也就是4个方向*4中颜色=16个切图！！！
   很明显，这不是一个好的解决问题的方法。

「抄」越

我们知道用CSS写两个内外重叠在一起的三角形，改变内三角形的背景色即能实现 ">", 那么poptip中的三角箭头利用这个方法应该也不成问题。
思路是和">"一样一样的，只不过，需要注意的是内外两个三角形border-color的处理。

由于是组件，为了方便展（装）示(逼)，这里就贴上Sass的代码。

HTML：

<div class="poptip poptip-succ">     <!--poptip基础样式，poptip-succ/warn/error/info 作为子模块标注提醒状态-->
    <div class="poptip-bd">
        弹出提示框
    </div>
    <span class="poptip-close">×</span>
    <span class="arrow arrow-top">    <!--arrow为箭头基础样式，arrow-top/right/bottom/left控制箭头方向-->        
        <span class="arrow arrow-in"></span>
    </span>
</div>

Sass:

//poptip state class
//         poptipClassName, backgroundColor, borderColor, arrowClassName, positionY, positionX, marginTop, marginLeft
$popInfo:  info             #edf4fa          #c7dbeb      top             -16px      20px       -7px       -8px;
$popSucc:  succ             #ebf9df          #bed7a8      right           20px       -16px      -8px       -9px;
$popError: error            #faedee          #fad2cd      bottom          -16px      20px       -9px       -8px;
$popWarn:  warn             #fcf5e3          #e8d4a8      left            20px       -16px      -8px       -7px;
$poptipGroup: $popInfo, $popSucc, $popError, $popWarn !default;



/* poptip arrow style */
.#{$poptipBaseClass}{
    //poptip 的基础样式
    .#{$poptipArrowClass}{
        width: 0px;
        height: 0px;
        line-height: 0;
        font-size: 0;
        border: 8px dashed transparent;
        position: absolute;
        zoom: 1;
    }
    //各个方向上的arrow
    @each $arrowItem in $poptipGroup{
        $arrowBorderStyle: 8px solid transparent;
        $arrowPositionClass: nth($arrowItem,4);
        $arrowPositionY: nth($arrowItem,5);
        $arrowPositionX: nth($arrowItem,6);
        $arrowMarginTop: nth($arrowItem,7);
        $arrowMarginLeft: nth($arrowItem,8);

        $arrowClass: unquote('arrow-'+$arrowPositionClass);
        
        //如果是向上的箭头，其实要设置的是三角形的下边框的颜色；以此类推。
        //position的取值先预设，后面根据实际需求重新调整
        .#{$arrowClass}{
            @if $arrowClass == 'arrow-top'{
                border-bottom:  $arrowBorderStyle;
                top: $arrowPositionY;
                left: $arrowPositionX;
                .#{$poptipArrowClass}-in{border-bottom: $arrowBorderStyle;}
            }
            @else if $arrowClass == 'arrow-right'{
                border-left: $arrowBorderStyle;
                top: $arrowPositionY;
                right: $arrowPositionX;
                .#{$poptipArrowClass}-in{border-left: $arrowBorderStyle;}
                @if $ie6{_right: -17px;}
            }
            @else if $arrowClass == 'arrow-bottom'{
                border-top: $arrowBorderStyle;
                bottom: $arrowPositionY;
                left: $arrowPositionX;
                .#{$poptipArrowClass}-in{border-top: $arrowBorderStyle;}
            }
            @else if $arrowClass == 'arrow-left'{
                border-right: $arrowBorderStyle;
                top: $arrowPositionY;
                left: $arrowPositionX;
                .#{$poptipArrowClass}-in{border-left: $arrowBorderStyle;}
            }
            .#{$poptipArrowClass}-in{
                margin-top: $arrowMarginTop;
                margin-left: $arrowMarginLeft;
            }
        }
    }
}



/* poptip state style */
@each $poptipItem in $poptipGroup{
    $stateClass: nth($poptipItem,1);
    $backgroundColor: nth($poptipItem,2);
    $borderColor: nth($poptipItem,3);

    $poptipClass: unquote('poptip-'+$stateClass);

    .#{$poptipClass}{
        border: 1px solid $borderColor;
        background-color: $backgroundColor;
        @each $arrowItem in $poptipGroup{

            $arrowPositionClass: nth($arrowItem,4);
            $arrowClass: unquote('arrow-'+$arrowPositionClass);


            //各种状态下的arrow颜色，

            .#{$arrowClass}{
                @if $arrowClass == 'arrow-top'{
                    border-bottom-color:  $borderColor;                             //外三角的颜色是poptip的边框颜色相同
                    .#{$poptipArrowClass}-in{border-bottom-color: $backgroundColor;}  //内三角的颜色是poptip的背景颜色相同
                }
                @else if $arrowClass == 'arrow-right'{
                    border-left-color: $borderColor;
                    .#{$poptipArrowClass}-in{border-left-color: $backgroundColor;}
                }
                @else if $arrowClass == 'arrow-bottom'{
                    border-top-color: $borderColor;
                    .#{$poptipArrowClass}-in{border-top-color: $backgroundColor;}
                }
                @else if $arrowClass == 'arrow-left'{
                    border-right-color: $borderColor;
                    .#{$poptipArrowClass}-in{border-right-color: $backgroundColor;}
                }
            }
        }
    }
}

Tips:
当border-style : dashed时，border-color:transparent在IE6下才有效。因此，通常我要写一个三角，首先会写出三角的基础样式:

.arrow{
    width: 0px;
    height: 0px;
    line-height: 0;
    font-size: 0;
    border: 8px dashed transparent;
}

然后再根据具体是哪一个方向的三角，改变对应边框的border-style和border-color。

.arrow{
    width: 0px;
    height: 0px;
    line-height: 0;
    font-size: 0;
    border: 8px dashed transparent;
    border-bottom: 8px solid #bed7a8;
}