純css 畫氣泡

　　咱們知道運用css能夠繪畫出各式各樣的形狀：三角形，圓形，正方形，橢圓形，平行四邊形等等，而經過他們之間進行兩兩組合能夠變換出各類意想不到的效果圖，氣泡框就是其中一個。最簡單的氣泡框就是一個矩形框+一個三角框。

咱們先來看看用css如何畫三角形：

 

 css繪三角形之 border方法

先畫一個100*100的矩形，給他四邊加上不一樣顏色的邊框。代碼以下：

.demo{ width:100px; height:100px; border:50px solid ;border-color:red pink yellow grey}

<div class="demo"></div>

 效果圖：

　　這時候咱們看到中間的白色矩形就是div的內容區域塊，可是當咱們將div的寬高設置爲0時：

.demo{ width:0px; height:0px; border:100px solid ;border-color:red pink yellow grey;margin:50px auto}

效果以下：

咱們想要的三角形出現了。當咱們想得到其中的特定方向的一個三角形時，只需將另外三邊的邊框顏色設置成透明便可。代碼以下：

.demo{width:0px;height:0px;border:100px solid;border-color:red transparent transparent transparent;margin:50px auto}

 效果圖：

 

 

 

 

此外，將相鄰兩邊設置相同顏色還能繪出直角三角形：

.demo{ width:00px; height:0px; border:100px solid ;border-color:red red yellow yellow;margin:50px auto; }

效果圖：

 

有了各類各樣的三角形再運用絕對定位接下來繪氣泡就簡單了：

代碼以下：

.demo{ width:260px; height:100px; border:10px solid #abc;margin:50px auto;position:relative}

.demo span{position:absolute; left:60px;bottom:-50px;
　　　　　　border:20px solid;border-color:#abc transparent transparent transparent}

效果圖：

　　這時候三角形是實心的不是咱們想要的結果，咱們能夠經過疊加一個同內容背景顏色相同的行內元素strong來實現咱們想要的效果：

.demo{ width:260px; height:100px; border:10px solid #abc;margin:50px auto;position:relative}
.demo strong{position:absolute; left:60px;bottom:-40px;
　　　　　　　　　　　　　　　　　　　　border:20px solid;border-color:white transparent transparent transparent}
.demo span{position:absolute; left:60px;bottom:-50px;
　　　　　　　　　　　　　　　　　　　　border:20px solid;border-color:#abc transparent transparent transparent}

 
 
<div class="demo">
       <span></span>
       <strong></strong></div>

 

效果圖：