发布：2023/12/7 15:21:37作者：大数据 来源：大数据 浏览次数：449
在很多网站都见过这样的箭头
，之前我一直以为是图片，直到今天才知道原来可以用css做。开始看代码没太看懂，后来自己试了几遍才恍然大悟。贴出来分享下。(大神请直接忽略)
先看代码：
.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;
}
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;
}
搞定，最后的优化注释已经很详细了。
