在很多网站都见过这样的箭头,之前我一直以为是图片,直到今天才知道原来可以用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。