文章参考 http://blog.csdn.net/cangkukuaimanle/article/details/6798509
http://www.jb51.net/css/16650.html
说说画三角形的原理
1、设置一个DIV的高度和宽度全部为0,
2、然后设置border-width为适当的值
3、设置border-style为实线
4、设置border-color的颜色，然后将上、右、下、左不需要显示的边框设置为透明即可
例子
<div class="topdirection"></div>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery.js"></script>
</head>
<style type="text/css">
.rightdirection
{
width:0;height:0;
line-height:0;
border-width:20px;
border-style:solid;
border-color:transparent transparent transparent #A9DBF6;
}
.bottomdirection
{
width:0;height:0;
line-height:0;
border-width:20px;
border-style:solid;
border-color: #A9DBF6 transparent transparent transparent;
}
.leftdirection
{
width:0;height:0;
line-height:0;
border-width:20px;
border-style:solid;
border-color: transparent #A9DBF6 transparent transparent;
}
.topdirection
{
/*设置高度和宽度全部都为0*/
width:0;
height:0;
line-height:0;
/*设置或检索对象的边框宽度*/
border-width:20px;
/*设置或检索对象的边框样式。 */
border-style:solid;
/*上边框透明，又边框透明，下边框显示，左边框透明*/
border-color: transparent transparent #A9DBF6 transparent;
}
</style>
<script>
</script>
<body>
<div class="rightdirection"></div>
<p>
<div class="bottomdirection"></div>
<p>
<div class="leftdirection"></div>
<p>
<div class="topdirection"></div>
<p>
</body>
</html>
备注： 如果希望现实出来边框，则最少要指定两个或者两个以上边框的样式，如果只是指定一个，则无法显示出来 。
例子二
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
.div{
border-left:#023060 10px solid;
border-right:#366AA1 10px solid;
border-top:#0F2E4E 10px solid;
border-bottom:#548CC7 10px solid;
width:120px;
margin:0px auto;
text-align:center;
font-size:12px;
line-height:22px;
color:#bbdcff;
background-color:#194D83;
}
</style>
<title>运用css模拟表格</title>
</head>
<body>
<div class="div">测试内容</div>
</body>
</html>
