标签：
在很多网站都见过这样的箭头
，之前我一直以为是图片，直到今天才知道原来可以用css做。开始看代码没太看懂，后来自己试了几遍才恍然大悟。贴出来分享下。(大神请直接忽略)
先看代码：
HTML部分就是一个单纯的div。
.sanjiao{ width:0px; height:0px; overflow:hidden; border-width:10px; border-color:transparent transparent blue transparent; border-style:dashed dashed solid dashed; }
咋一看我确实没明白原因。(看懂的后面可以忽略)
*****************************************************************************************************************
一步步分析：
1、画div
.sanjiao{ width:30px; height:30px; background-color:black; }
(这一步看不懂的麻烦回去复习css)
2、给边框，分开给
.sanjiao{ width:30px; height:30px; background-color:black; border-top:solid red 20px; border-left:solid blue 20px; border-bottom:solid yellow 20px; border-right:solid green 20px; }
(相信聪明的童靴马上就看明白了，我也是在这才明白)
3、去掉中间的div
.sanjiao{ width:0; height:0; border-top:solid red 20px; border-left:solid blue 20px; border-bottom:solid yellow 20px; border-right:solid green 20px; }
(是不是已经看懂了)
4、优化代码
.sanjiao{ /* 设定div大小 */ width:0; height:0; /* 防溢出，稳固兼容性 */ overflow:hidden; /* 箭头尺寸 */ border-width:10px; /* 给箭头着色，四个值分别是边框的四个方向，箭头的方向正好相反 */ border-color:blue transparent transparent transparent; /* 为了兼容性，最好把四个值都补上，需要的方向设实线，其他方向虚线 */ border-style:solid dashed dashed dashed; }
搞定，最后的优化注释已经很详细了。
看到这儿还看不懂，不好意思 请找地儿充值IQ。
标签：
原文地址：http://www.cnblogs.com/MirageFox/p/5877599.html
