em标签结合css的border属性实现流行的倒三角效果,这里IE7包括IE7以下浏览器不支持效果。

[code]<style type=”text/css”>
a {color:#FFF;text-decoration:none;font-weight:bold;}
.box{ width:300px; height:30px;background:#CCC;position:relative;top:100px;left:100px;padding:8px 0 0 12px; }
.to-top{display:block; overflow:hidden; width:0px; height:0px; border:6px solid #ccc; border-color:#ccc #fff; border-width:0 6px 6px 6px; position:absolute; left:30px; top:0;margin-top:-6px;}
.to-right{display:block; overflow:hidden; width:0px; height:0px; border:6px solid #ccc; border-color:#fff #ccc; border-width:6px 0 6px 6px; position:absolute; right:0px; top:30px;margin-right:-6px;}
.to-bottom{display:block; overflow:hidden; width:0px; height:0px; border:6px solid #ccc; border-color:#ccc #fff; border-width:6px 6px 0 6px; position:absolute; right:30px; bottom:0;margin-bottom:-6px;}
.to-left{display:block; overflow:hidden; width:0px; height:0px; border:6px solid #ccc; border-color:#fff #ccc; border-width:6px 6px 6px 0 ; position:absolute; left:0; bottom:30px;margin-left:-6px;}
</style>[/code]
[code]<div class=”box”><a href=”https://sdeno.com”>CSS代码实例 www.xgllseo.com</a><em class=”to-bottom”></em></div>[/code]