如果把HTML标签如<div>的宽度和高度都设置为0,那么在这种情况下设置边框会显示什么样子的?编写代码看效果:
<style type="text/css"> .nowh1 { width:0;height:0; margin:0 auto; border-width:30px; border-style:solid; border-color:#000000 #ffcc00 #009900 #cc3300; } </style> <div class="nowh1"></div>
效果如下所示:
如果设置各边框的不同宽度又会是什么样子(例如将上边框的宽度设置为0)?编写代码看效果:
<style type="text/css"> .nowh2 { width:0;height:0; margin:0 auto; //上边框的宽度设置为0 border-width:0px 30px 30px 30px; border-style:solid; border-color:#000000 #ffcc00 #009900 #cc3300; } </style> <div class="nowh2"></div>
效果如下所示:
相信大家看到这里的时候,应该知道如何实现显示一个三角形了,没错,就是把上边框、左边框和右边框的颜色设置为透明,编写代码看效果:
<style type="text/css"> .nowh3 { width:0;height:0; margin:0 auto; //上边框的宽度设置为0 border-width:0px 30px 30px 30px; border-style:solid; //上边框、左边框和右边框的颜色设置为透明 border-color:transparent transparent #009900 transparent; } </style> <div class="nowh3"></div>
效果如下所示:
再来,如果想实现带边框的三角形怎样实现?以下贴出HTML+CSS代码,有兴趣的站长们可以细读下。
<style type="text/css"> //箭头向上的三角形 .triangle_border_up { position:relative; width:0;height:0; margin:0 auto; border-width:0 30px 30px; border-style:solid; border-color:transparent transparent #333 transparent; } .triangle_border_up span { position:absolute;left:0;top:0; display:block;width:0;height:0; border-width:0 28px 28px; border-style:solid; border-color:transparent transparent #ffcc00 transparent; top:1px; left:-28px; } </style> <div class="triangle_border_up"><span></span></div>
效果如下所示:
再进一步,我们可以使用这种技巧来实现带向上箭头的气泡提示框,如下代码及效果所示:
<style type="text/css"> .bubble-box {position:relative;width:200px;margin:0 auto;font-size:12px;background-color:#eee;text-align:center;} .bubble-box a {color:#444;text-decoration:none} .bubble-box .triangle-popup { position:absolute;left:50%;top:30px;margin-left:-61px; width:100px;padding:5px 10px; border:1px solid #333;border-radius:4px; color:#444;background-color:#ffcc00; } .bubble-box .triangle-popup span { position:absolute;left:50%;top:-10px;margin-left:-10px; display:block;width:0;height:0; border-width:0 10px 10px; border-style:solid; border-color:transparent transparent #333; } .bubble-box .triangle-popup span em { position:absolute;left:-10px;top:1px; display:block;width:0;height:0; border-width:0 10px 10px; border-style:solid; border-color:transparent transparent #ffcc00; } </style> <div class="bubble-box"><a href="">三角形</a> <div class="triangle-popup"><span><em></em></span>纯CSS写带边框的三角形</div> </div>