文章參考 ?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>
?
?
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
