以前我畫小三角時用我新學到的CSS的border屬性畫的。然后按照這個思路我學會了畫氣泡以及有邊框的氣泡舶赔，下面是圓角有邊框氣泡步驟：
第一步：畫一個矩形食听，設置背景與邊框背景邻寿，設置圓角與相對定位
第二步：利用矩形border屬性，畫一個小三角涮雷，設置與矩形邊框一致的邊框背景阵面，設置絕對定位，移動到矩形上方
第三步：利用矩形border屬性再畫一個小三角，設置與矩形背景一致的邊框背景样刷，設置絕對定位疊加在上一個小三角上
注意：保證小三角疊加而來的邊框與矩形邊框一致仑扑，小三角豎直移動的距離不是矩形邊框距離，兩個小三角的垂直距離才是颂斜。
其實不用那么麻煩的夫壁，觀察上方的圖，我們可以畫一個矩形設置兩邊的邊框沃疮，然后旋轉盒让，移動到矩形上方。需要用到CSS3∷臼摺２Ｄ轉換transform屬性中的rotate()方法：元素順時針旋轉給定的角度邑茄。允許負值，元素將逆時針旋轉俊啼。
同時我們可以設置小三角也有圓角肺缕，我們采用邊框畫三角時，邊框已經(jīng)被用了授帕，不能用來表示邊框以及設置邊框的形狀同木，但是我們保留邊框就比較靈活了。
注意：
Internet Explorer 10跛十、Firefox 以及 Opera 支持 transform 屬性彤路。
Chrome 和 Safari 需要前綴 -webkit-。
Internet Explorer 9 需要前綴 -ms-芥映。
效果：
第一步：矩形洲尊，背景，邊框奈偏，圓角坞嘀，相對定位
第二步：小矩形，背景惊来，邊框丽涩，圓角
第三步：旋轉，絕對定位裁蚁，移動
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 氣泡2</title>
<style>
*{
margin:0;padding: 0;
}
.box{
margin:50px;
width: 200px;
height: 100px;
text-align: center;
line-height: 50px;
background: pink;
border: 1px solid red;
border-radius: 5px;
position: relative;
}
.box:before{
content: "";
display: inline-block;
width: 20px;
height: 20px;
background: pink;
border-top: 1px solid red;
border-left: 1px solid red;
border-top-left-radius: 5px;
position: absolute;
top:-11.5px;
left:30px;
transform: rotate(45deg);
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-o-transform: rotate(45deg); /* Opera */
-moz-transform: rotate(45deg); /* Firefox */
}
</style>
</head>
<body>
<div class="box">我是氣泡</div>
</body>
</html>
矩形旋轉的時候是基于矩形中心點旋轉的内狸，設置top移位時比較簡單，不用計算過多厘擂。
