网站性能优化之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样式：

另外一种方式为：

HTML结构为：

<div class="deanteacherpic">
                        <div class="deantpics"><a href=""><img src="static/images/wap/1.png"></a></div>
                        <div class="img-triangle-right"></div>
                   </div>
                   <div class="deanteacherinfos">
                        <div class="info-triangle-left"></div>
</div>

css代码为：

.deanteacherbox .deanteacherpic{ width: 190px; height: 190px; position: relative; background: url(images/wap/teacher-bg.jpg) no-repeat center center; float: left;}
.img-triangle-right{ position: absolute; top: 80px; width: 0; height: 0; display:block; background:transparent; border-top:15px solid transparent; border-right:12px solid #eee; border-bottom: 15px solid transparent; border-left:0 solid transparent; right: 0}
.info-triangle-left{ position: absolute; top: 82px; width: 0; height: 0; background: transparent; border-top: 12px solid transparent; border-bottom: 12px solid transparent;z-index: 3; left: -10px; border-right: 10px solid #fff; border-left: 0 solid transparent;}