css小三角形

每次浏览网页看到界面里的箭头啥的,都想去了解一下。因为三角形是我们在开发中常用的,比如点击展开某个树状菜单,右边本来是向右的小箭头,然后变为向下,类似的场景很多。

由于小白技术不够,只能上手先做一个满足一下动手好奇心。

话不多说直接上代码:


效果:


这个比较简单,宽高设置为0,用边框来控制大小,然后边框颜色改为透明,把颜色设置成自己喜欢的颜色就阔以了,实际操作就只有简单的几步。

(PS:span是内联元素,必须转块元素,才能设置宽高)

(PS:left控制向右的三角,right控制向左的三角,top控制向下的三角,bottom控制向下的三角)

还是得多动动小手ヾ(◍°∇°◍)ノ゙

你可能感兴趣的:(css小三角形)