小編給大家分享一下怎么用CSS3實(shí)現(xiàn)聊天氣泡效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)公司是一家朝氣蓬勃的網(wǎng)站建設(shè)公司。公司專(zhuān)注于為企業(yè)提供信息化建設(shè)解決方案。從事網(wǎng)站開(kāi)發(fā)，網(wǎng)站制作，網(wǎng)站設(shè)計(jì)，網(wǎng)站模板，微信公眾號(hào)開(kāi)發(fā)，軟件開(kāi)發(fā)，微信平臺(tái)小程序開(kāi)發(fā)，10余年建站對(duì)成都公路鉆孔機(jī)等多個(gè)行業(yè)，擁有多年建站經(jīng)驗(yàn)。

.comment{

width:150px;

height:35px;

position:relative;

margin:30pxauto0;

background:#f8ac09;

border-radius:5px;

}

.comment:after{

content:'';

width:0;

height:0;

position:absolute;

top:5px;

right:-16px;

border:solid8px;

border-color:transparenttransparenttransparent#f8ac09;

font-size:0;

}

實(shí)現(xiàn)方式大家早有耳聞，圓角矩形和三角形嘛，三角形原理就是border可以設(shè)置為透明，可以復(fù)制上例中的代碼修改border-color屬性摸索三角形的實(shí)現(xiàn)。

注：IE8更早版本對(duì)border的transparent支持不是很好。大家可以無(wú)視低版本缺陷，因?yàn)榇蟛糠譃g覽器都顯示正常，非要兼容的話把transparent屬性設(shè)置為主背景色而不是氣泡背景色（前提是背景為純色）。

想必大家都知道，這里不贅述，聊一聊其他實(shí)現(xiàn)方法。

這里的三角形部分可以使用正方形代替，實(shí)現(xiàn)同樣效果，方法就是旋轉(zhuǎn)小正方形使其一部分露在外面。代碼如下

.comment{

position:relative;

width:150px;

height:35px;

background:#f8ac09;

border-radius:5px;

margin:30pxauto0;

}

.comment:after{

content:'';

position:absolute;

top:10px;

right:-4px;

width:8px;

height:8px;

transform:rotate(45deg);

background-color:#f8ac09;

}

缺點(diǎn)是小三角只能是直角三角形，當(dāng)然也可以通過(guò)變換得到菱形再進(jìn)行拼接，變換多了感覺(jué)沒(méi)有第一種方式直接，瀏覽器兼容transform(2D)屬性如下

以上是“怎么用CSS3實(shí)現(xiàn)聊天氣泡效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！