写在前面的话
我从来没有在自己博客上贴过图,因为我觉得麻烦,我喜欢用markdown写东西,如果要贴图的话感觉会不那么好管理。不过既然我决定做前端方面的工作,看来这图是一定要贴了。今天来点轻松点的话题。如何通过css代码实现我们熟悉的箭头图标。
Paste_Image.png
稍后会解析它的原理。
如何实现
箭头这种东西,我一直以为是贴图来的,后来看了一些css相关的东西,才知道css这东西,不只是能够用来调整位置和颜色。还可以用来画一些比较简单的图形(好吧,复杂的也可以)。就如上面这个箭头,其实只是很简单的几行代码就能实现。虽说只是几行代码的事情,But,如果去理解它的原理,也会是相当有趣的。
骨架
首先肯定要准备好骨架, 也就是我们的html
对,没错,骨架就是那么简单。很多有趣的图形,只需要一个div就能做出来了。(我现在也只会这个,就先说这个吧!!!)
样式
重点来看看样式。
1. 大家都熟悉的样子
先来举个简单的例子:
caret
.caret {
display: inline-block;
border-bottom: 1px solid;
border-left: 1px solid;
border-to