首頁 > 開發者 > JavaScript
CSS實現的帶有箭頭的矩形效果執行個體代碼，css矩形
CSS實現的帶有箭頭的矩形效果執行個體代碼:
帶有箭頭的矩形效果現在應用非常的廣泛，例如危險的資訊是帶有箭頭矩形效果，當然它們的實現原理和咱們是不一樣的，在網頁中當然也有這樣的應用，例如彈出資訊提示說明，可以用箭頭用來作為方位提示，下面就用執行個體代碼簡單介紹一下。
代碼執行個體如下:
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="http://www.softwhy.com/" /><title>三種純CSS實現三角形的方法</title> <style type="text/css"> .message-box { position:relative; width:240px; height:60px; line-height:60px; border:1px solid #000; text-align:center; color:#0C7823; } .triangle-border { position:absolute; left:100px; overflow:hidden; width:0; height:0; border-width:10px; border-style:none dashed solid dashed; } .tb-border { top:-10px; border-color:#000 transparent #000 transparent; } .tb-background { top:-9px; border-color:transparent transparent #fff transparent; }</style> </head> <body> <div class="message-box"> <span>border屬性實現</span> <div class="triangle-border tb-border"></div> <div class="triangle-border tb-background"></div> </div> </body> </html>
以上代碼實現了帶有箭頭的矩形效果，下面介紹一下此效果的實現過程。
一.實現原理:
原理很簡單，就是設定兩個div的邊框，然後讓這個兩個div重合，並且給它們使用top屬性值，相差1px，這樣露出來的就是三角形的輪廓，為了更容易理解此效果，先看一段代碼:
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="http://www.softwhy.com/" /><title>螞蟻部落</title><style type="text/css">div { width:0px; height:0px; border-bottom:50px solid green; border-left:50px solid blue; border-right:50px solid red; border-top:none;}</style></head><body><div></div></body></html>
上面的綠色三角形就是我們要顯示的三角形效果，但是我們要的是細線邊框的三角形，所以再用一個這樣的三角形來和它重疊，然後利用定位差，實現邊框效果。原理大體如此，當然覆蓋在它上面的三角形背景是白色的。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=9801
更多內容可以參閱:http://www.softwhy.com/divcss/
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
