goTOP
January 1, 2015

CSS 有角的對話氣球

| |
網頁語言 » CSS | 閱覽(3056) | Posted by apao at 13:22
點擊在新視窗中瀏覽此圖片
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; /*角的位置*/
}


參考這個網頁也不賴
http://zxcvbnmnbvcxz.com/demonstration/pure-css3-balloons.php

點擊在新視窗中瀏覽此圖片
Facebook twitter LINEk
文章来自: 本站原創
Tags: , , ,
0 Comment(s)
我要發表評論
暱稱
密碼 [ 訪客無需密碼 ]
電郵
網址
開啟HTML 開啟UBB 開啟表情 隱藏 記住我