怎么用CSS3實現(xiàn)聊天氣泡效果

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

　　<pclass="comment"></p>

　　<styletype="text/css">

　　.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;

　　}

　　</style>

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

　　注：IE8更早版本對border的transparent支持不是很好。大家可以無視低版本缺陷，因為大部分瀏覽器都顯示正常，非要兼容的話把transparent屬性設(shè)置為主背景色而不是氣泡背景色（前提是背景為純色）。

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

　　這里的三角形部分可以使用正方形代替，實現(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;

　　}

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

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