標題：CSS 有角的對話氣球
出處：A.PAO designSTUDIO BLOG
時間：Thu, 01 Jan 2015 13:22:21 +0000
作者：apao
地址：https://blog.apao.idv.tw/post/1063/

內容：

點擊在新視窗中瀏覽此圖片
https://blog.apao.idv.tw/attachment.php?fid=2040

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


點擊在新視窗中瀏覽此圖片
https://blog.apao.idv.tw/attachment.php?fid=2041



Generated by Bo-blog 2.1.1 Release