使用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 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>备注：如果希望现实出来边框，则最少要指定两个或者两个以上边框的样式，如果只是指定一个，则无法显示出来。
例子二
<!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> 相关推荐
猫沙盆 2020-07-07
葉無聞 2020-06-09
buttonChan 2020-04-10
sdbxpjzq 2019-12-03
沈宫新 2020-02-23
sdbxpjzq 2019-11-04
sdbxpjzq 2019-10-26
zengni 2019-10-21
libowen0 2014-07-08
猫沙盆 2017-05-04
zhouguizhi 2018-02-14
ZiXuanFY 2007-04-12
淡风wisdon大大 2019-08-01
我就是停不下来 2019-07-01
jiedinghui 2019-07-01
wangnantjobj 2019-07-01
yongquanx 2019-07-01