在上一篇文章中，主要观摩学习了淘宝的“>” 实现，开拓了自己的思路。
顺便总结一下自己，有时会做不代表做的好，跟高中数学一样，一道题会有好几种解法（提起数学就有种淡淡的忧桑...）；在前端中更是如此，有时仅仅是为了完成任务，很少考虑过更优的解决方法，So~利用上篇总结的方法，尝试一些改变，举一反三。
史前
现有项目中的组件poptip
图片已挂，待更新。
注意这些poptip的小三角，以前用的笨方法就是切图。很显然，这是个非常蛋疼的方法，因为：
- 不同状态的
poptip意味着不同颜色的小三角，以上图为例，4个状态下的poptip就要对应要切4个不同颜色的三角箭头； - 不同状态下三角箭头的方向可能不一样，上下左右...那么也就是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;
}
