一圖勝千言
三角形的"border"
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head> <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;
margin-left: 30px;
padding: 30px;
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: 17px solid transparent;
border-right: 17px solid #eee;
border-bottom: 17px solid transparent;
border-right-color: rgba(0, 0, 0, 0.2);
left: -18px;
top: 40px;
content: '';
}
/* 背景陰影*/
.tip:after {
position: absolute;
display: inline-block;
border-top: 16px solid transparent;
border-right: 16px solid #eee;
border-bottom: 16px solid transparent;
left: -16px;
top: 41px;
content: '';
}
</style>
</head>
<body>
<div id="contentHolder">
<h1>CSS 箭頭Demo</h1>
<p>以下代碼.是極好的純 CSS 箭頭樣式担敌，不使用背景圖!</p>
<div id="position:relative;">
<div class="arrow-up">向上的箭頭</div>
<br />
<div class="arrow-down">向下的箭頭</div>
<br />
<div class="arrow-left">向左的箭頭</div>
<br />
<div class="arrow-right">向右的箭頭</div>
</div>
<h2>CSS 箭頭氣泡 ，使用 偽類(Pseudo-Element)</h2>
<div style="position:relative;">
<div class="tip">
企業(yè)級開發(fā)首選技術(shù)是什么廷蓉？JavaEE和.Net哪個技術(shù)更好全封？在JavaEE開發(fā)中主要用哪些框架？另外在移動大熱的趨勢下如何開發(fā)出一個成功的Android產(chǎn)品桃犬？
</div>
<br/>
<div class="tip">
向左的箭頭: 只有三個邊：上刹悴、下、右疫萤。而 < | 總體來看颂跨，向左三角形的高=上+下邊框的長度。 寬=右邊框的長度<br />
向右的箭頭: 只有三個邊：上扯饶、下恒削、左。而 |> 總體來看尾序，向右三角形的高=上+下邊框的長度钓丰。 寬=左邊框的長度<br />
向上的箭頭,類似于A,只有三個邊，不能指定上邊框
</div>
</div>
</div>
</body>
</html>
