先来看看这段代码:
/css/.d1{ width: 0; height: 0; border: 100px solid #339933;}/html/<div class=\"大众d1\"大众></div>/css/.d2{ width: 0; height: 0; border-width: 100px; border-style: solid; border-color:#FFCCCC #0099CC #996699 #339933;}/html/<div class=\公众d2\"大众></div>
CSS绘制三角形和箭头，不用再用图片了
看了这两段代码，和效果图，是不是有一点眉目了？原来画三角形，只须要用元素的`border`来掌握就可以了，`border-with`掌握大小， `border-style`掌握样式（实线、虚线等）， `border-color`掌握颜色，分上、右、下、左
向下三角形
/css/.d3{ margin-left: 10px; float: left; width: 0; height: 0; border-width: 100px; border-style: solid; border-color:#FFCCCC transparent transparent transparent;}/html/<div class=\"大众d3\公众></div>
CSS绘制三角形和箭头，不用再用图片了
向左三角形
/css/.d4{ margin-left: 110px; float: left; width: 0; height: 0; border-width: 100px; border-style: solid; border-color: transparent #0099CC transparent transparent;}/html/<div class=\公众d4\公众></div>
CSS绘制三角形和箭头，不用再用图片了
这里的`transparent`是透明的意思
接下来两种就留给聪明的你了，相信你可以的，动手才知道原来这么大略！
实在我们还可以通过，一种样式，来实现不能角度的三角形，那便是利用CSS3里面的旋转`transform:rotate(90deg)`。
/css/.d4{ margin-left: 110px; float: left; width: 0; height: 0; border-width: 100px; border-style: solid; border-color: transparent #0099CC transparent transparent; transform: rotate(90deg); /顺时针旋转90°/}/html/<div class=\"大众d4\"大众></div>
CSS绘制三角形和箭头，不用再用图片了
箭头示例向左箭头
/css/.left{ position: absolute;}.left:before,.left:after{ position: absolute; content: ''; border-top: 10px transparent dashed; border-left: 10px transparent dashed; border-bottom: 10px transparent dashed; border-right: 10px #fff solid;}.left:before{ border-right: 10px #0099CC solid;}.left:after{ left: 1px; /覆盖并错开1px/ border-right: 10px #fff solid;}/html/<i class=\公众left\"大众 ></div>
CSS绘制三角形和箭头，不用再用图片了
是不是创造箭头和三角形是一样的呢？创造了，解释你已经懂了，箭头实在便是2个三角形，然后用白色三角形覆盖蓝色三角形，并且错开1px，刚刚好就形成了箭头。这就和《最强大脑》层叠溶解项目是一样的。
向上箭头
/css/.top{ position: absolute;}.top:before,.top:after{ position: absolute; content: ''; border-top: 10px transparent dashed; border-left: 10px transparent dashed; border-right: 10px transparent dashed; border-bottom: 10px #fff solid;}.top:before{ border-bottom: 10px #0099CC solid;}.top:after{ top: 1px; /覆盖并错开1px/ border-bottom: 10px #fff solid;}/html/<i class=\"大众top\"大众 ></div>
CSS绘制三角形和箭头，不用再用图片了
通过上面两个例子，我想剩余两个方向的箭头，你该当可以搞定了，便是不能，那就会一种就好了，然后通过`transform:rotate(90deg)`，来旋转角度，还是能搞定各个方向的箭头。
公告喜好小编的点击关注，理解更多资源！
