css实现一个三角箭头

mac2025-11-04  1

今天浏览12306网站的时候看见有个箭头图标 我们可以用css来实现这个图标 1.下面为css部分的代码,html中直接添加个div就可以。设置div的边框0px,会出现4个三角形拼成的正方形 <style> #icon { width: 0px; height:0px; border-top: 5px solid black; border-bottom: 5px solid red; border-left: 5px solid pink; border-right: 5px solid yellow; } </style>

去掉底部的border,再将两侧边框设置为透明属性就成了三角形了 最终

#test { width: 0; height: 0; border-top: 5px solid #acd1f9; border-left: 5px solid transparent; border-right: 5px solid transparent; }
最新回复(0)