技術總是在突破，技巧總是被人在總結。換著以前像這種情況必定是切圖了，現在通過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>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
