标签：
在Web开发中，通过CSS代码也可以实现一些简单的图片，当然，如果你有耐心，也可以实现较为复杂的图片噢。
那么请问为什么有图片不去用而需要用CSS来实现呢？一是因为性能的原因，图片带给服务器和客户端的压力比几行CSS代码要大得多；二是因为没有必要，有些简单的效果利用CSS就可以直接完成了，为什么还需要麻烦地引入图片呢？
比如大名鼎鼎的bootstrap中选择列表的下三角就是通过css实现的。效果如下：
其实现代码如下：
<ul>
<li class="dropdown">dropdown</li>
</ul>
.dropdown:after {
position:absolute;
width:0;
height:0;
margin-top:8px;
margin-left:5px;
display:inline-block;
border-left:6px solid transparent;
border-right:6px solid transparent;
border-top:6px solid #000000;
content:'';
}
代码位置：http://runjs.cn/code/o3miehqr
其实这个图片是通过CSS代码来实现的。代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#rectangle {
position: relative;
background:#FFFFFF;
border:10px solid #999999;
width:200px;
height:120px;
}
#circle {
position: absolute;
background-color: #999999;
width:40px;
height: 40px;
border-radius: 50%;
margin-left:140px;
margin-top:20px;
}
#triangle1 {
position:absolute;
width:0;
height:0;
border-left:40px solid transparent;
border-right:70px solid transparent;
border-bottom:80px solid #999;
margin-top:30px;
margin-left:10px;
}
#triangle2 {
position:absolute;
width:0;
height:0;
border-left: 30px solid transparent;
border-right: 60px solid transparent;
border-bottom:60px solid #999;
margin-top:50px;
margin-left: 80px;
}
</style>
</head>
<body>
<div id="rectangle">
<span id="circle"></span>
<span id="triangle1"></span>
<span id="triangle2"></span>
</div>
</body>
</html>
代码位置：http://runjs.cn/code/zj0bbjpw标签：
原文地址：http://blog.csdn.net/mevicky/article/details/46467713
