CSS3 巧妙實現聊天氣泡

前一陣子敢玩的 Mobile 頁改版完成了，就以前的頁面風格更加扁平化，從暗色係爲主背景轉到亮色背景，去掉更多的陰影，給用戶簡約的體驗風格，哈哈我不是設計師不過多評價啦。感興趣的朋友能夠直接去 idarex移動端主頁。

此次改版的全部 style 都是 orange 寫的，感觸頗多，分期分享給你們

下面說正題，說好的聊天氣泡呢？

傳統的聊天氣泡

什麼又是傳統的聊天氣泡,直接上圖

代碼以下

<div class="comment"></div>

<style type="text/css">
  .comment {
    width: 150px;
    height: 35px;
    position: relative;
    margin: 30px auto 0;
    background: #f8ac09;
    border-radius: 5px;
  }

  .comment:after {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    top: 5px;
    right: -16px;
    border: solid 8px;
    border-color: transparent transparent transparent #f8ac09;
    font-size: 0;
  }
</style>

實現方式你們早有耳聞，圓角矩形和三角形嘛，三角形原理就是 border 能夠設置爲透明，能夠複製上例中的代碼修改 border-color 屬性摸索三角形的實現。

注：IE8 更早版本對 border 的 transparent 支持不是很好。你們能夠無視低版本缺陷，由於大部分瀏覽器都顯示正常，非要兼容的話把 transparent 屬性設置爲主背景色而不是氣泡背景色（前提是背景爲純色）。

想必你們都知道，這裏不贅述，聊一聊其餘實現方法。

這裏的三角形部分可使用正方形代替，實現一樣效果，方法就是旋轉小正方形使其一部分露在外面。代碼以下

.comment {
  position: relative;
  width: 150px;
  height: 35px;
  background: #f8ac09;
  border-radius: 5px;
  margin: 30px auto 0;
}

.comment:after {
  content: '';
  position:absolute;
  top: 10px;
  right: -4px;
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  background-color: #f8ac09;
}

缺點是小三角只能是直角三角形，固然也能夠經過變換獲得菱形再進行拼接，變換多了感受沒有第一種方式直接，瀏覽器兼容 transform(2D) 屬性以下

整體還不錯，幾種方法都能放心使用，不存在大的兼容問題。

現實案例

這裏的設計稿多了一個邊框，直接上設計稿

?️ 想想怎麼處理，咱們回顧上文

第一種方式自己就是 border 透明，怎麼再給它設置 border 是個問題，暫且先不考慮。

第二種方式若是使用小正方形旋轉，層級疊加是個問題，由於設計稿中的氣泡背景爲 rgba(247, 188, 10, 0.03) 先看下實現代碼

.comment {
  width: 150px;
  height: 35px;
  position:relative;
  margin: 30px auto 0;
  background-color: rgba(247, 188, 10, 0.03);
  border: 1px solid rgba(252, 185, 8, 0.35);
  border-radius: 5px;
}

.comment:after {
  content: '';
  width: 8px;
  height: 8px;
  position: absolute;
  top: 10px;
  right: -4px;
  transform: rotate(45deg);
  background-color: rgba(247, 188, 10, 0.03);
  border: 1px solid rgba(252, 185, 8, 0.35);
}

效果以下

上面的思路有問題，由於小正方形與氣泡的一部分會重合，半透明背景的部分總會出現問題，有人說了偷個懶總能夠吧，把透明後的背景色吸收出來而後再進行疊加（由於你們注意到設計稿的總體背景是純色）

按着這個思路去實現，那麼問題又來了。具體兩個問題以下。

1.若是小正方形疊加在上，那麼小正方形左半部分的邊框就會顯示

.comment {
  width: 150px;
  height: 35px;
  position: relative;
  margin: 30px auto 0;
  background-color: #faf8f3;
  border: 1px solid #fbe2a0;
  border-radius: 5px;
}

.comment:after {
  content: '';
  width: 8px;
  height: 8px;
  position:absolute;
  top: 10px;
  right: -4px;
  transform: rotate(45deg);
  background-color: #faf8f3;
  border: 1px solid #fbe2a0;
}

效果以下，比較以前的圖片圓角矩形的右邊確實遮住了，但小正方形左邊的邊框顯示出來了

處理方式呢，能夠這樣。

.comment:after {
  content: '';
  width: 8px;
  height: 8px;
  position: absolute;
  top: 10px;
  right: -5px;
  transform: rotate(45deg);
  background-color: #faf8f3;
  border: 1px #fbe2a0;
  border-style: solid solid none none;
}

咱們發現問題解決了。效果以下

設計稿是有 padding 的，親測本案例中可行，可是本着認真的原則 padding-right 若是太小，會出現什麼問題呢？

咱們向 div 中加文字。

<div class="comment">Hello,orange.Welcome to FrontEnd World!</div>

效果以下

咱們發現字母 o 的右下角被小正方形左側覆蓋了，固然能夠經過 z-index 屬性 hack。

2.若是小正方形在圓角矩形下，那麼圓角矩形的右邊框就會完整顯示，你們自行腦補，此方案不合理，不過多解釋。

以上的方法缺點也都很明顯，那怎麼作才能更嚴謹，能根據需求的變化不大傷筋骨呢？

咱們還用三角形的方案！ what? 不是說三角形的方案不可行了嘛 ？

一個三角形是不可行那兩個呢，咱們有請 after 的兄弟 before 出場。項目的真實代碼以下

.reply {
  position: relative;
  margin: 0.672rem 0 0.096rem 0;
  padding: 0.408rem 0.816rem;

  border: 1px solid rgba(#fcb908, 0.35);
  border-radius: 0.2rem;
  background-color: rgba(#f7bc0a, 0.03);

  &:after {
    content: '';
    width: 0px;
    height: 0px;
    border-color:  transparent transparent #faf8f3 transparent ;
    border-style: solid;
    border-width: 6px;
    position: absolute;
    top: -11px;
    border-radius: 3px;
    left: 18px;
    right: auto;
  }

  &:before {
    content: '';
    width: 0px;
    height: 0px;
    border-color: transparent transparent rgba(#fcb908, 0.35) transparent;
    border-style: solid;
    border-width: 7px;
    position: absolute;
    top: -14px;
    border-radius: 3px;
    left: 17px;
    right: auto;
  }
}

注：這段代碼用的是 SASS 進行預編譯，若是從頭仔細看到這裏的話不難理解，兩個三角形疊加，大三角形顏色是邊框的顏色，小三角形是內部背景色，小三角形絕對定位時向下移 3px 把圓角矩形的一部分上邊框遮擋，這樣小三角下部也有溢出，具體在兩像素以內，實際上不存在遮擋文本問題。

總結

實際問題解決的方法不少，就看你們怎麼去思考，這個方案也不是最滿意的方案，由於多了一個僞元素，主要仍是設計思想的多樣性，總之 css 很靈活。

有人不由會問，這裏設計稿給的是向上的箭頭，爲何例子裏卻都是向右的，這裏向右的都是我寫的 demo ，理解原理的話，改變個位置方向都是大同小異。

最後，讀本文有收穫的或者有更好想法的朋友，歡迎下方留言交流。

文章出自 orange 的 我的博客 http://orangexc.xyz/