三角样式

一、下三角

<span class="triangle-down"></span>

.triangle-down{

    display: inline-block;

    width: 0;

    height: 0;

     margin-left: 3px;

    margin-top: -3px;

    vertical-align: middle;

    border-top: 4px dashed;

    border-top: 4px solid\9;

    border-right: 4px solid transparent;

    border-left: 4px solid transparent;

}

二、上三角

.triangle-up{

    display: inline-block;

    width: 0;

    height: 0;

     margin-left: 3px;

    margin-top: -3px;

    vertical-align: middle;

    border-bottom: 4px dashed;

    border-bottom: 4px solid\9;

    border-right: 4px solid transparent;

    border-left: 4px solid transparent;

}

三、重叠三角

.demo:after{

position: absolute;

top: -6px;

left: 50%;

margin-left: -6px;

display: inline-block;

width: 0;

height: 0;

content: '';

border-bottom: 6px dashed #fff;

border-bottom: 6px solid\9 #fff;

border-right: 6px solid transparent;

border-left: 6px solid transparent;

}

.demo:before{

position: absolute;

top: -8px;

left: 50%;

margin-left: -8px;

display: inline-block;

width: 0;

height: 0;

content: '';

border-bottom: 8px dashed #e2e2e2;

border-bottom: 8px solid\9 #e2e2e2;

border-right: 8px solid transparent;

border-left: 8px solid transparent;

}