用CSS样式制作小三角和小箭头

利用css的border的style,width,color三个属性制作小三角和小箭头,颜色大小想怎么变就怎么变，不用担心使用图片失真等问题。

需要注意的是left,right,投票,bottom,这4个方位,需要一定的空间想象力,记住一个,其他的可以自己推算出来

transparent表示透明

小三角:

HTML结构

CSS样式

div {
    width: 0px;
    height: 0px;
}

.left {
border-width: 20px;
border-style: solid;
border-color: transparent red transparent transparent;
}

.top {
    border-width: 20px;
    border-style: solid;
    border-color: transparent  transparent red transparent ;
}

.right {
border-width: 20px;
border-style: solid;
border-color: transparent transparent transparent red;
}

.bottom {
    border-width: 20px;
    border-style: solid;
    border-color: red transparent  transparent transparent ;
}

小箭头

左箭头

.left {
position: absolute;
}

    .left:before,
    .left:after {
        position: absolute;
        content: '';
        border-top: 20px transparent dashed;
        border-left: 20px transparent dashed;
        border-bottom: 20px transparent dashed;
        border-right: 20px #fff solid;
    }

    .left:before {
        border-right: 20px #f00 solid;
    }

    .left:after {
        /* 覆盖并错开1px */
        left: 1px;
        border-right: 20px #fff solid;
    }

右箭头

.right {
position: absolute;
}

    .right:before,
    .right:after {
        position: absolute;
        content: '';
        border-top: 20px transparent dashed;
        border-left: 20px #fff solid;
        border-bottom: 20px transparent dashed;
        border-right: 20px transparent dashed;
    }

    .right:before {
        border-left: 20px #f00 solid;
    }

    .right:after {
        /* 覆盖并错开1px */
        left: -1px;
        border-left: 20px #fff solid;
    }

上箭头

    .top {
        position: absolute;
    }

    .top:before,
    .top:after {
        position: absolute;
        content: '';
        border-top: 20px transparent dashed;
        border-left: 20px transparent dashed;
        border-bottom: 20px #fff dashed;
        border-right: 20px transparent solid;
    }

    .top:before {
        border-bottom: 20px #f00 solid;
    }

    .top:after {
        /* 覆盖并错开1px */
        top: 1px;
        border-bottom: 20px #fff solid;
    }

下箭头

.bottom {
position: absolute;
}

    .bottom:before,
    .bottom:after {
        position: absolute;
        content: '';
        border-top: 20px  #fff solid;
        border-left: 20px transparent dashed;
        border-bottom: 20px transparent dashed;
        border-right: 20px transparent dashed;
    }

    .bottom:before {
        border-top: 20px #f00 solid;
    }

    .bottom:after {
        /* 覆盖并错开1px */
        top: -1px;
        border-top: 20px #fff solid;
    }