CSS三角箭头制作技巧-优快云博客

视觉稿中经常有些小三角，如下图。每次用图片做太不方便了，我们看看用css实现的效果（支持ie6,7哦）

<style>
 /*border实现三角*/
    /*箭头向上*/
    .arrow-top{
         width       : 0;
         height      : 0;
         font-size   : 0;
         line-height : 0;
         border-left: 5px dashed transparent;
         border-right: 5px dashed transparent;
         border-bottom: 5px solid red;
    }
    /*箭头向下*/
    .arrow-bottom{
            width       : 0;
            height      : 0;
            font-size   : 0;
            line-height : 0;
            border-left: 5px dashed transparent;
            border-right: 5px dashed transparent;
            border-top: 5px solid red;
    }
    /*箭头向右*/
    .arrow-right{
        width       : 0;
        height      : 0;
        font-size   : 0;
        line-height : 0;
        border-bottom: 5px dashed transparent;
        border-top: 5px dashed transparent;
        border-left: 5px solid red;

    }
    /*箭头向左*/
    .arrow-left{
        width       : 0;
        height      : 0;
        font-size   : 0;
        line-height : 0;
        border-bottom: 5px dashed transparent;
        border-top: 5px dashed transparent;
        border-right: 5px solid red;

    }
</style>

来看看整体html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>border实现三角</title>
    <style>
        /*border实现三角*/
        /*箭头向上*/
        .arrow-top{
            width       : 0;
            height      : 0;
            font-size   : 0;
            line-height : 0;
            border-left: 5px dashed transparent;
            border-right: 5px dashed transparent;
            border-bottom: 5px solid red;
        }
        /*箭头向下*/
        .arrow-bottom{
            width       : 0;
            height      : 0;
            font-size   : 0;
            line-height : 0;
            border-left: 5px dashed transparent;
            border-right: 5px dashed transparent;
            border-top: 5px solid red;
        }
        /*箭头向右*/
        .arrow-right{
            width       : 0;
            height      : 0;
            font-size   : 0;
            line-height : 0;
            border-bottom: 5px dashed transparent;
            border-top: 5px dashed transparent;
            border-left: 5px solid red;

        }
        /*箭头向左*/
        .arrow-left{
            width       : 0;
            height      : 0;
            font-size   : 0;
            line-height : 0;
            border-bottom: 5px dashed transparent;
            border-top: 5px dashed transparent;
            border-right: 5px solid red;

        }
    </style>
</head>
<body>

<div>
    <span>店铺信息</span>
    <span class="arrow-right" style="display: inline-block;"></span>
    <span class="arrow-left" style="display: inline-block;"></span>
    <span class="arrow-top" style="display: inline-block;"></span>
    <span class="arrow-bottom" style="display: inline-block;"></span>
</div>

</body>
</html>