今天浏览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;
}