本文轉載自：http://www.jb51.net/css/97112.html
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>CSS 箭頭Demo</title> <style type="text/css"> /* 向上的箭頭,類似於A,只有三個邊，不能指定上邊框 */ div.arrow-up { width: 0; height: 0; border-left: 5px solid transparent; /* 左邊框的寬 */ border-right: 5px solid transparent; /* 右邊框的寬 */ border-bottom: 5px solid #2f2f2f; /* 下邊框的長度|高,以及背景色 */ font-size: 0; line-height: 0; } /* 向下的箭頭 類似於 V */ div.arrow-down { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid #f00; font-size: 0; line-height: 0; } /* 向左的箭頭: 只有三個邊：上、下、右。而 <| 總體來看，向左三角形的高=上+下邊框的長度。 寬=右邊框的長度 */ div.arrow-left { width: 0; height: 0; border-bottom: 15px solid transparent; /* 下邊框的高 */ border-top: 15px solid transparent; /* 上方邊框的高 */ border-right: 10px solid yellow; /* 右邊框的長度|寬度，以及背景色 */ font-size: 0; line-height: 0; } /* 向右的箭頭: 只有三個邊：上、下、左。而 |> 總體來看，向右三角形的高=上+下邊框的長度。 寬=左邊框的長度 */ div.arrow-right { width: 0; height: 0; border-bottom: 15px solid transparent; /* 下邊框的高 */ border-top: 15px solid transparent; /* 上方邊框的高 */ border-left: 60px solid green; /* 左邊框的長度|寬度，以及背景色 */ font-size: 0; line-height: 0; } /* 基本樣式 */ .tip { background: #eee; border: 1px solid #ccc; padding: 10px; border-radius: 8px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); position: relative; width: 200px; } /* 箭頭 - :before and :after, 一起組成了好看的氣泡小箭頭 */ .tip:before { position: absolute; display: inline-block; border-top: 7px solid transparent; border-right: 7px solid #eee; border-bottom: 7px solid transparent; border-right-color: rgba(0, 0, 0, 0.2); left: -8px; top: 20px; content: ''; } /* 背景陰影*/ .tip:after { position: absolute; display: inline-block; border-top: 6px solid transparent; border-right: 6px solid #eee; border-bottom: 6px solid transparent; left: -6px; top: 21px; content: ''; } </style> </head> <body> <div id="contentHolder"> <h1>CSS 箭頭Demo</h1> <p>以下代碼.是極好的純 CSS 箭頭樣式，不使用背景圖!</p> <div id="position:relative;"> <div class="arrow-up">向上的箭頭</div> <div class="arrow-down">向下的箭頭</div> <div class="arrow-left">向左的箭頭</div> <div class="arrow-right">向右的箭頭</div> </div> <h2>CSS 箭頭氣泡 ，使用 偽類(Pseudo-Element)</h2> <div style="position:relative;"> <div class="tip"> 企業級開發首選技術是什么？JavaEE和.Net哪個技術更好？在JavaEE開發中主要用哪些框架？ </div> <br/> <div class="tip"> 向左的箭頭: 只有三個邊：上、下、右。而 < | 總體來看，向左三角形的高=上+下邊框的長度。 寬=右邊框的長度 向右的箭頭: 只有三個邊：上、下、左。而 |> 總體來看，向右三角形的高=上+下邊框的長度。 寬=左邊框的長度 向上的箭頭,類似於A,只有三個邊，不能指定上邊框 </div> </div> </div> </body> </html>