当前位置：首页 → 问答吧 → 小弟用CSS做了个对角线，怎么给这个对角线加黑色的边啊？？小弟先谢各位了

小弟用CSS做了个对角线，怎么给这个对角线加黑色的边啊？？小弟先谢各位了

时间：2011-09-05

来源：互联网

<!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=utf-8" /> <title>无标题文档</title> <style type="text/css"> .line_top{ border-top:1px solid #000;} .line_right{border-right:1px solid #000;} .line_left{border-left:1px solid #000;} .line_bottom{border-bottom:5px solid #000;} .bg-color{background-color:#FDE9D9;} table.tab{} table.tab th{width:20px; height:30px;} .out{ border-top:30px #ffffff solid;/*上边框宽度等于表格第一行行高*/ border-right:20px #FDE9D9 solid;/*左边框宽度等于表格第一行第一格宽度*/ position:relative;/*让里面的两个子容器绝对定位*/ } .out1{ border-top:30px #ffffff solid;/*上边框宽度等于表格第一行行高*/ border-left:20px #FDE9D9 solid;/*左边框宽度等于表格第一行第一格宽度*/ position:relative;/*让里面的两个子容器绝对定位*/ } </style> </head> <body> <table class="tab" width="0" border="0" cellspacing="0" cellpadding="0"> <tr> <th colspan="2"><div class="out"> </div></th> <td rowspan="5" class="line_top line_bottom bg-color">111111111111</td> <td class="line_top line_left bg-color"> </td> <td rowspan="5" class="line_top line_bottom bg-color">33333333333</td> <td class="line_top line_left bg-color"> </td> <td rowspan="5" class="line_top line_bottom bg-color bg-color">555555555</td> <th colspan="2"><div class="out1"> </div></th> </tr> <tr> <td class="line_top line_right"> </td> <td class="bg-color"> </td> <td class="line_top line_right bg-color"> </td> <td class="line_top line_right bg-color"> </td> <td class="bg-color"> </td> <td class="line_top line_left"> </td> </tr> <tr> <td class="line_right"> </td> <td class="bg-color"> </td> <td class="line_top line_left bg-color"> </td> <td class="line_top line_left bg-color"> </td> <td class="bg-color"> </td> <td class="line_left"> </td> </tr> <tr> <td class="line_right"> </td> <td class="bg-color"> </td> <td class="line_top line_right bg-color"> </td> <td class="line_top line_right bg-color"> </td> <td class="bg-color"> </td> <td class="line_left"> </td> </tr> <tr> <td class="line_right line_bottom"> </td> <td class="line_bottom bg-color"> </td> <td class="line_bottom line_top line_left bg-color"> </td> <td class="line_bottom line_top line_left bg-color"> </td> <td class="line_bottom bg-color"> </td> <td class="line_bottom line_left"> </td> </tr> </table> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 gf0205 于 2011-9-5 11:06 编辑 ]

作者: gf0205 发布时间: 2011-09-05

就是在房子上左右两个斜线加个黑边，能跟上下两条黑边连上。谢谢大家了。

作者: gf0205 发布时间: 2011-09-05

如果你用HTML5可以的，用canvas，如果不用HTML那你就搞2条斜线背景吧

作者: yflintao 发布时间: 2011-09-05