css画箭头

html

<div class="arrow-left"></div>//左
<div class="arrow-right"></div>//右
<div class="arrow-top"></div>//上
<div class="arrow-bottom"></div>//下

css 

此处以左箭头为例，箭头颜色以before的颜色为准，after的border颜色与箭头所在元素的颜色一致，border方向与箭头方向相反

    .arrow-left {
        position: relative; 
    }
    .arrow-left:before{
        width: 0;
        height: 0;
        border: 10px solid transparent;
        border-right-color: orange;
        position: absolute;
        content: "";
    }
	.arrow-left:after{
		width: 0;
        height: 0;
		border: 10px solid transparent;
		border-right-color: #fff;
		position: absolute;
		top: 0;
		left: 3px;
		content: "";
    }