January 1, 2015
CSS ARROW PLEASE! http://cssarrowplease.com
Size: ▲大小指定
Color:▲ 顏色指定
Border width: 邊框線的寬度
Border color: 邊框線的顏色
參考 CSS內說明:
/*對話氣球*/
.arrow_box {
position: relative; /*指定相對位置*/
background: #D2DCFA; /*背景顏色*/
border:0; /*邊框 顏色 粗細 種類*/
padding:0px 6px 0px 6px; /*內部寬度 上右下左*/
border-radius:6px; /*圓角*/
-moz-border-radius:6px; /*moz 圓角*/
-webkit-border-radius:6px; /*webkit 圓角*/
}
.arrow_box:after {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute; /*對bUsername 絕對位置*/
pointer-events: none;
border-color: rgba(210, 220, 250, 0); /*背景顏色*/
border-top-color: #D2DCFA; /*背景顏色*/
border-width: 5px; /*角的大小*/
margin-left: -11px; /*角的位置*/
}
.arrow_box {
position: relative; /*指定相對位置*/
background: #D2DCFA; /*背景顏色*/
border:0; /*邊框 顏色 粗細 種類*/
padding:0px 6px 0px 6px; /*內部寬度 上右下左*/
border-radius:6px; /*圓角*/
-moz-border-radius:6px; /*moz 圓角*/
-webkit-border-radius:6px; /*webkit 圓角*/
}
.arrow_box:after {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute; /*對bUsername 絕對位置*/
pointer-events: none;
border-color: rgba(210, 220, 250, 0); /*背景顏色*/
border-top-color: #D2DCFA; /*背景顏色*/
border-width: 5px; /*角的大小*/
margin-left: -11px; /*角的位置*/
}
參考這個網頁也不賴
http://zxcvbnmnbvcxz.com/demonstration/pure-css3-balloons.php
0 Comment(s)