CSS——图标制作

在CSS3中，我们可以通过定义一个div，用各种形式对它进行修改，达到图标的标准。

为什么要用图标

CSS绘制的图标反应速度要比图片更快，图片还要加载，会慢一些，图标本身在CSS加载的时候就已经加载完毕，几乎没有延迟。
而且，CSS3的图像，能在一定程度上缓解网站的压力，而且还挺好看的，对吧。

图标制作

三角形

示例代码如下：

<style>
      div {
            width:0;
            height:0;
            border-width:100px;
            border-style: solid;
            border-color: red transparent transparent transparent; /*将右边、下边、左边变成透明*/
         }
</style>

这里就是三角形的实例。在border-color中，我们可以调整哪些边被隐藏。
其原理就是将元素的宽高设置为0，然后设置较粗边框，并将其中的任意两条或三条边框定义为transparent(透明)。

梯形

示例代码如下：

      <style>
            div {
                  width:100px;
                  border:100px solid transparent;
                  border-bottom:100px solid hotpink;
            }
      </style>

效果如这里，当我们修改梯形大小时，需要把width中的值、border的第一个值、border-bottom的第一个值设置成相同的数值即可。
其实实际上，这里绘制的梯形，实际是在三角形的基础上，设置一定的宽度。

圆

示例代码如下：

div {
                width:100px;
                height:100px;
                border:1px solid red;
                border-radius:50%;
                background-color: turquoise;
}

这里就是圆，border-radius就是设置圆角，四个50%就是一个标准的圆了。

书签

示例代码如下：

div {
                width:0;
                height:120px;
                background-color: turquoise;
                border: 120px solid transparent;
                border-bottom: 120px solid white;
}

这里是书签。底部的三角形是需要跟随背景色的改变而改变的，所以要记得改一改。

下载箭头

示例代码如下：

div {
                width:0;
                color:hotpink;
                border:160px solid transparent;
                border-top: 160px solid;
                box-shadow: 0 -240px 0 -80px;
}

这里是下载箭头。其原理是通过border属性制作一个三角形，然后再用box-shadow制作正方形，拼合一下即可。但是我们不能用width和height，因为正方形和三角形始终一样大。

暂停键

示例代码如下：

div {
                width:100px;
                height:100px;
                color:turquoise;
                border:1px solid;
                border-radius:100px;
                outline:20px solid;
                outline-offset: -52px;
}

这里是暂停键。
outliner-offset是偏移量。在这里，如果将outline-offset的值改为-70px，就会出现一个加号，可以尝试尝试。

结尾

CSS3和HTML5的功能非常多，建议大家在学习CSS和HTML的基础上再去深入学习，这样收获更大。