纯css制作三角形箭头（www.dayday28.com）
技术总是在突破，技巧总是被人在总结。换着以前像这种情况必定是切图了，现在通过Css就可以轻松实现啦，不得不感叹那些对技术钻研的牛人，我们这里只是传播这种技巧了，也是工作中的应用，特此分享还没有用此方法的同仁。下面是效果图，先截个图大家看看。
html code:（直接复制到本地去预览吧）
<!doctype html>
<html>
<head>
<title>纯CSS实现"三角形箭头"布局的代码-IT技术网www.173it.cn</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="Content-Language" content="zh-CN"/>
<mce:style type="text/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;}
--></mce:style><style type="text/css" _mce_bogus="1"><!--
span {_overflow:hidden;}
.wp {position:relative; background:#000; 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 #000 transparent;}
#box{padding:40px;background:#fff;"_mce_style="padding: 40px; background: #fff;}
.demo_2{position: relative; border:1px solid red;padding:20px; margin-bottom:30px;" _mce_style="position:relative; border:1px solid red; padding:20px; margin-bottom:30px;}
.demo_2 .span1{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;" _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;}
.demo_2 .span-in{position: absolute;left:30px;top:-31px; width: 0; height: 0; font-size: 0; border-width: 16px; border-style: dashed dashed solid dashed; border-color: transparent transparent #FFF transparent;" _mce_style="position:absolute;left:30px;top:-31px;width:0;height:0;font-size:0;border:16px dashed dashed solid dashed transparent transparent #FFF transparent;}
.sp{border-width:40px;border-style:solid;border-color:#0F0 #ff0 #910048 #ff1800;line-height:0;font-size:0;overflow:hidden;width:100px;height:0" _mce_style="line-height:0;font-size:0;overflow:hidden;width:100px;height:0;border: 40px solid red green black blue;}
--></style>
</head>
<body>
<div id="box">
<div class="wp"><span class="arrow"></span>Demo1</div>
<div class="demo_2"><span class="span1"></span><span class="span-in"></span>Demo2</div>
<h2>相信大家看了下面的这个例子就会理解"三角边"的实现原理了</h2>
<div class="sp"></div>
<h2>其实就是把某些边透明掉，这样就实现了模拟的三角形箭头了。<span style="color:red;">注意ie6下透明的边要是dotted或dashed</span></h2>
<div style="border-width:40px;border-style:dashed dashed solid dashed;border-color:transparent transparent red transparent;line-height:0;font-size:0;width:0;height:0" _mce_style="line-height: 0; font-size: 0; width: 0; height: 0; border: 40px dashed dashed solid dashed transparent transparent red transparent;"></div>
<div style="border-width:40px;border-style:dashed solid solid dashed;border-color:transparent blue red transparent;line-height:0;font-size:0;width:0;height:0" _mce_style="line-height: 0; font-size: 0; width: 0; height: 0; border: 40px dashed solid solid dashed transparent blue red transparent;"></div>
</div>
</body>
</html>