美文网首页程序员
带边框的三角箭头实现方法

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

作者: Triple_Rock | 来源:发表于2014-06-03 09:21 被阅读0次

在上一篇文章中,主要观摩学习了淘宝的“>” 实现,开拓了自己的思路。
顺便总结一下自己,有时会做不代表做的好,跟高中数学一样,一道题会有好几种解法(提起数学就有种淡淡的忧桑...);在前端中更是如此,有时仅仅是为了完成任务,很少考虑过更优的解决方法,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-styleborder-color

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

相关文章

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

    在上一篇文章中,主要观摩学习了淘宝的“>” 实现,开拓了自己的思路。顺便总结一下自己,有时会做不代表做的好,跟高中...

  • 基于Telegram二次开发 --- Node 篇

    Telegram 使用的核心 Node 带箭头的边框:右边的 Node 是左边 Node 的子类; 无箭头的边框:...

  • UML工具

    类之间的关系 继承关系 实线带三角箭头 接口实现关系 虚线带三角箭头 组合关系 实现带实菱形,B由A组成且B不存在...

  • 设计模式 UML 建模

    继承 表示方法:用实线空心三角箭头表示。(由子类指向父类) 接口 表示方法:空心三角形箭头的虚线。(有实现类指向接...

  • Swift 带箭头的文本组件

    UI设计中,一些文本经常会出现三角箭头,类似于下图: 单独某个场景,画箭头、边框及阴影实现起来也还好,不过呢,UI...

  • 利用css画三角箭头图标

    利用css画三角箭头图标方式 单独设置正方形的两条相邻的边框,通过transform的rotate属性值旋转实现箭...

  • CSS实现三角形效果

    /* 向上的箭头,类似于A,只有三个边,不能指定上边框 三角形 */ /* 向下的箭头 类似于 V 三角形*/ ...

  • 带阴影的三角形与带边框的三角形

    带阴影的三角形 思路:旋转三角形,添加阴影 带边框的三角形 大概思路:边框的颜色作为底色,上面覆盖三角形的颜色,定...

  • css 实现三角形箭头

    插入DOM 使用伪类 参考:用纯CSS实现的箭头CSS画三角形原理css整理 -- 右箭头,上下箭头,三角形 这个...

  • 类图

    ┄▷ 空心三角箭头-虚线 实现关系(继承抽象类)车和小汽车或车和自行车―▷ 空心三角箭头-实线 ...

网友评论

    本文标题:带边框的三角箭头实现方法

    本文链接:https://www.haomeiwen.com/subject/joudtttx.html