使用div和CSS样式画三角形

文章参考 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和CSS样式画三角形

例子

<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>
<body>
    <div class="rightdirection">
    </div>
    <p>
    <div class="bottomdirection">
    </div>
    <p>
    <div class="leftdirection">
    </div>
    <p>
    <div class="topdirection">
    </div>
    <p>
</body>
</html>

备注：如果希望现实出来边框，则最少要指定两个或者两个以上边框的样式，如果只是指定一个，则无法显示出来。

使用div和CSS样式画三角形

例子二

<!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>

使用div和CSS样式画三角形

相关推荐