前一陣子敢玩的 mobile 頁改版完成了，就之前的頁面風格更加扁平化，從暗色系為主背景轉到亮色背景，去掉更多的陰影，給使用者簡約的體驗風格，哈哈我不是設計師不過多評價啦。感興趣的朋友可以直接去 idarex移動端主頁。
這次改版的所有 style 都是 orange 寫的，感觸頗多，分期分享給大家
下面說正題，說好的聊天氣泡呢？
什麼又是傳統的聊天氣泡,直接上圖
**如下
border-color屬性摸索三角形的實現。
注：ie8 更早版本對 border 的 transparent 支援不是很好。大家可以無視低版本缺陷，因為大部分瀏覽器都顯示正常，非要相容的話把 transparent 屬性設定為主背景色而不是氣泡背景色（前提是背景為純色）。想必大家都知道，這裡不贅述，聊一聊其他實現方法。
這裡的三角形部分可以使用正方形代替，實現同樣效果，方法就是旋轉小正方形使其一部分露在外面。**如下
.comment
.comment:after
總體還不錯，幾種方法都能放心使用，不存在大的相容問題。
這裡的設計稿多了乙個邊框，直接上設計稿
?️ 想一想怎麼處理，我們回顧上文
第一種方式本身就是border透明，怎麼再給它設定border是個問題，暫且先不考慮。
第二種方式如果使用小正方形旋轉，層級疊加是個問題，因為設計稿中的氣泡背景為rgba(247, 188, 10, 0.03)先看下實現**
.comment
.comment:after
上面的思路有問題，因為小正方形與氣泡的一部分會重合，半透明背景的部分總會出現問題，有人說了偷個懶總可以吧，把透明後的背景色吸取出來然後再進行疊加（因為大家注意到設計稿的整體背景是純色）
按著這個思路去實現，那麼問題又來了。具體兩個問題如下。
1.如果小正方形疊加在上，那麼小正方形左半部分的邊框就會顯示
.comment
.comment:after
處理方式呢，可以這樣。
.comment:after設計稿是有padding的，親測本案例中可行，但是本著認真的原則padding-right如果過小，會出現什麼問題呢？
我們向 div 中加文字。
hello,orange.welcome to frontend world!
我們發現字母 o 的右下角被小正方形左側覆蓋了，當然可以通過z-index屬性 hack。
2.如果小正方形在圓角矩形下，那麼圓角矩形的右邊框就會完整顯示，大家自行腦補，此方案不合理，不過多解釋。
以上的方法缺點也都很明顯，那怎麼做才能更嚴謹，能根據需求的變化不大傷筋骨呢？
我們還用三角形的方案！ what? 不是說三角形的方案不可行了嘛 ？
乙個三角形是不可行那兩個呢，我們有請after的兄弟before出場。專案的真實**如下
.reply
&:before
}
注：這段**用的是 sass 進行預編譯，如果從頭仔細看到這裡的話不難理解，兩個三角形疊加，大三角形顏色是邊框的顏色，小三角形是內部背景色，小三角形絕對定位時向下移 3px 把圓角矩形的一部分上邊框遮擋，這樣小三角下部也有溢位，具體在兩畫素之內，實際上不存在遮擋文字問題。實際問題解決的方法很多，就看大家怎麼去思考，這個方案也不是最滿意的方案，因為多了乙個偽元素，主要還是設計思想的多樣性，總之 css 很靈活。
有人不禁會問，這裡設計稿給的是向上的箭頭，為什麼例子裡卻都是向右的，這裡向右的都是我寫的 demo ，理解原理的話，改變個位置方向都是大同小異。
css實現聊天氣泡效果
css功能強大，能實現很多炫 酷的效果，今天給大家分享 用css3繪製聊天氣泡的方法 在繪製氣泡之前，先實現箭 頭的繪製，如下 效果如上圖所示 從上面的圖可以發現，在未設 置寬高的情況下，上下左右的 邊框都是乙個三角形，如果只 留下某乙個方向上的border，就可以實現三角箭頭的效果 實現css 和...
css3實現氣泡效果的聊天框
因為css3尚未形成標準，所以現行的瀏覽器對於css3支援不太一致，某些特性需要加上瀏覽器字首 css屬性的瀏覽器字首 字首 渲染引擎 使用該引擎的瀏覽器 khtml khtml konqueror ms trident internet explorer moz mozilla firefox o...
CSS 如何實現微信聊天氣泡
先來分析一下聊天氣泡 氣泡分割為兩部分，左邊的矩形，右邊的三角形 矩形的實現比較簡單 先對對右邊的三角形進行分析 如果把width，height置為0，效果則如下圖 只需要三角形，所以把border的其中一邊設定為你需要的顏色，其他三個border顏色則設定為與背景顏色相同，就得到了我們想要的三角形...