纯 CSS 绘制三角形

简单的css三角图形绘制功能

左右箭头的定位和大小需要注意，其他的都是正常使用border来处理的。结果如下所示：

width="100%" height="300" src="//jsfiddle.net/8daav4cf/embedded/html,css,result/" allowfullscreen="allowfullscreen">

html 源码

<div class="mycontain">
  <span class="arrow-left">span>  
  <span class="arrow-right">span>  
  <span class="arrow-up">span>  
  <span class="arrow-down">span>  
  <span class="arrow-topleft">span>  
  <span class="arrow-topright">span>  
  <span class="arrow-bottomleft">span>  
  <span class="arrow-bottomright">span>  
  <span class="arrow">span>
div>

css源码

.mycontain{margin:50px auto;position:relative;}
.mycontain span{width:0px;height:0px;overflow:hidden;}
.arrow-up{border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #008;}
.arrow-down{border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #008;}
.mycontain .arrow-left{border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:10px solid #008;border-left:10px solid transparent;display:block;position:absolute;top:0px;left:50px;}
.arrow-right{border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid #008;border-right:10px solid transparent;display:block;position:absolute;top:0px;left:40px;}
.arrow-topleft{border-top:10px solid #008;border-right:10px solid transparent;}
.arrow-topright{border-top:10px solid #008;border-left:10px solid transparent;}
.arrow-bottomleft{border-bottom:10px solid #008;border-right:10px solid transparent;}
.arrow-bottomright{border-bottom:10px solid #008;border-left:10px solid transparent;}
.arrow{border-top:10px solid #c00;border-right:10px solid #0c0;border-bottom:10px solid #00c;border-left:10px solid #666;position:absolute;top:0px;left:10px;}