css 泡泡對話框

css 泡泡對話框

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 是箭頭顏色.

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

*

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料