原文来自http://mrthink.net/css-common-round-triangle/
原理是在采用三个div~top、content、bottom，top、bottom层里面加入4个em标签， margin-left，margin-right逐级递减，于是就产生了圆角的感觉
ok废话不多说，上代码先
css：
.content{ padding:10px; height:20px; background:#9F3;} .r_a,.r_b,.r_c,.r_d{ background:#9F3; display:block; overflow:hidden; height:1px;} .r_a1{ margin:0px 5px; } .r_a2{ margin:0px 4px; } .r_a{ margin:0px 3px; } .r_b{ margin:0px 2px; } .r_c{ margin:0px 1px; } .r_d{ margin:0px 1px; height:2px; }
html代码
<body> <div class="r_top"> <em class="r_a"></em> <em class="r_b"></em> <em class="r_c"></em> <em class="r_d"></em> </div> <div class="content"></div> <div class="r_bottom">
</div> </body>
就这样一个圆角就实现了
下面实现三角，这个就比较简单了, 把元素定义成块级0大小(0宽0高0字号0行高)后,设一个border-width 通过改变元素的border-color值实现. 本文用的是em元素, 当然, 如果你项目中用em比较频繁, 为避免冲突也可以用samp,strong等元素.
当然, 即便用CSS实现的三角形, 万恶的IE6还是会给你添点麻烦: IE6不支持border-color的transparent值, 怎么办? 为ie6单独写一个border-color值, 然后用chroma滤镜实现透明, 详见代码
html：
<div class="sj"> <em></em> <em class="a"></em> <em class="b"></em> </div>
Css：
.sj em{
display:block;
0;
height:0;
font-size:0;
line-height:0;
border-20px;
border-style:solid;
border-color:#cf6 #ddd #39c #ffc;
_filter:chroma(color=#000000)/*色度滤镜,让IE6实现透明borderColor.滤镜的颜色值不可简写*/}
.sj em.a{
border-color:#0CF transparent transparent transparent;
_border-color:#0CF #000 #000 #000;
}
.sj em.b{
border-color:transparent #0CF transparent transparent;
_border-color:#000 #0CF #000 #000;
}