Css-tricks 上學到的技巧.
Chris Coyier 寫的一段 script.
[css].bubble {
margin: 50px;
padding: 10px;
position: relative;
border-radius: 50px;
}
.bubble:after {
content: "";
position: absolute;
top: 100%;
left: 50px;
border-top: 20px solid blue;
border-top-color: inherit;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}[/css]
利用 margin/padding 去構造一個對話框&箭頭位置.
好處是可繼承父系的顏色設定,
使用方法為
[html]<div class="bubble" style="background: red; border-color: red;">test</div>
<div class="bubble" style="background: #999; border-color:#999">test</div>[/html]
background 就是背色, border 是箭頭顏色.
