html 向左箭头图标css,使用css实现箭头图标

写在前面的话

我从来没有在自己博客上贴过图，因为我觉得麻烦，我喜欢用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