网站性能优化之CSS无图片技术：三角形

1、使用CSS无图片技术，可以总结得到以下三个优点：

减少请求资源的大小；

减少http的请求个数；

提高可维护性。

一、CSS无图片技术，微博中有哪些实际应用呢？





通过上面的展示，我们可以看到，无图片技术，在微博上应用是十分普遍的。

二、无图片技术的实现方式：

大概有四种方式：一是通过background-color、border生成图片；二是通过字符生成图片；三是通过CSS3的gradient等生成图片(这个要考虑低级浏览器不兼容的问题)；四是CSS3的自定义字体(@font-face)生成图片。

利用CSS的background-color、border属性可以生成一些图形，例如三角形。纯粹的CSS2内容，完成可以兼容IE6。

1）用background-color生成的小方块，效果如下：



CSS代码：



2）用border生成的小方块，效果如下：



CSS代码：



3）用border生成的小三角，效果如下：



CSS代码：



4）用border生成的尖三角，效果如下：



CSS代码：



5）用border生成的斜三角，效果如下：





HTML结构：



CSS代码：





通过以上五种图形，可以得到以下图形，效果图如下：



二、通过字符生成图片，例如尖角，圆点以及箭头，这也是CSS2范畴，完全可以兼容IE6，这个在博中使用广泛，这里不单独写demo了。

1）圆点（alt+41457），效果图如下



HTML结构：



CSS样式：