css 绘制不规则不多边形实践及各方向>箭头（可兼容到ie8）

.triangle {
 
border-left: 26px solid #ff9000;border-right: 26px solid #ff9000;border-top: 26px solid #ff9000;border-bottom: 7px solid transparent;left:0;bottom: 0;width:0;height:0;
}

.arrow{  position: relative;}/*箭头朝底 down*/.arrow-down:after,.arrow-down:before {  border: 5px solid transparent;  border-top: 5px solid #76d2e5;  width: 0;  height: 0;  position: absolute;  top: 16px;  right: 14px;  content: ' ';}.arrow-down:before{  border-top-color: #caf6ff;  /* border-top: 14px solid #fff; */  top: 18px;}/*箭头朝上 up*/.arrow-up{  -webkit-transform: rotateZ(-45deg);}/*箭头朝左 left*/.arrow-left{  -webkit-transform: rotateZ(225deg);}/*箭头朝右 right*/.arrow-right:after,.arrow-right:before {  border: 10px solid transparent;  border-left: 10px solid #fff;  width: 0;  height: 0;  position: absolute;  top: 0;  right: -20px;  content: ' '}.arrow-right:before{  border-left-color: #f00;  right: -21px;}