首页 > 代码库 > 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。
css+div打造三角形(箭头)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。