css+div打造三角形（箭头）

css+div打造三⾓形（箭头）
在很多⽹站都见过这样的箭头，之前我⼀直以为是图⽚，直到今天才知道原来可以⽤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。