纯CSS实现 “三角箭头”代码 span {_overflow:hidden;}
.wp {position: relative; background: red; padding: 20px; color: #fff; margin-bottom: 30px;}
.arrow {position: absolute; left: 30px; top: -32px; width: 0; height: 0; font-size: 0; border-width: 16px; border-style: dashed dashed solid dashed; border-color: transparent transparent
red transparent;}
--> “三角形箭头”例1
bottom: 30px;">
transparent red transparent;" _mce_style="position: absolute; left: 30px; top: -32px; width: 0; height: 0; font-size: 0; border: 16px dashed dashed solid dashed transparent transparent
red transparent;">“三角形箭头”例1
30px;">
transparent red transparent;" _mce_style="position: absolute; left: 30px; top: -32px; width: 0; height: 0; font-size: 0; border: 16px dashed dashed solid dashed transparent transparent
red transparent;">
border-color: transparent transparent #FFF transparent;" _mce_style="position: absolute; left: 30px; top: -27px; width: 0; height: 0; font-size: 0; border: 16px dashed dashed solid
dashed transparent transparent #FFF transparent;">“三角形箭头”例2
bottom: 30px;">
transparent transparent red;" _mce_style="position: absolute; left: 30px; top: -16px; width: 0; height: 0; font-size: 0; border: 16px dashed dashed dashed solid transparent transparent
transparent red;">“三角形箭头”例3
bottom: 30px;">
transparent transparent red;" _mce_style="position: absolute; left: 30px; top: -16px; width: 0; height: 0; font-size: 0; border: 16px 24px dashed dashed dashed solid transparent
transparent transparent red;">
dashed; border-color: transparent transparent #fff transparent;" _mce_style="position: absolute; left: 14px; top: -32px; width: 0; height: 0; font-size: 0; border: 16px dashed dashed solid
dashed transparent transparent #fff transparent;">“三角形箭头”例4
padding: 20px; color: #fff; margin-bottom: 30px;">
transparent red transparent;" _mce_style="position: absolute; left: 0px; top: -12px; width: 188px; height: 0; font-size: 0; border: 6px dashed dashed solid dashed transparent transparent
red transparent;">
模拟梯形边
red transparent transparent transparent;" _mce_style="position: absolute; left: 0px; bottom: -12px; width: 188px; height: 0; font-size: 0; border: 6px solid dashed dashed dashed red
transparent transparent transparent;">
看看这个例子就会明白所谓“三角边”了
0; overflow: hidden; width: 100px; height: 0; border: 40px solid red green black blue;">
把某些边透明掉就可以模拟三角形了，注意ie6下透明的边要是dotted或dashed
-height: 0; font-size: 0; width: 0; height: 0; border: 40px dashed dashed solid dashed transparent transparent red transparent;">
0; font-size: 0; width: 0; height: 0; border: 40px dashed solid solid dashed transparent blue red transparent;">
http://www.999jiujiu.com/
