以前我画小三角时用我新学到的CSS的border属性画的。然后按照这个思路我学会了画气泡以及有边框的气泡，下面是圆角有边框气泡步骤：
第一步：画一个矩形，设置背景与边框背景，设置圆角与相对定位
第二步：利用矩形border属性，画一个小三角，设置与矩形边框一致的边框背景，设置绝对定位，移动到矩形上方
第三步：利用矩形border属性再画一个小三角，设置与矩形背景一致的边框背景，设置绝对定位叠加在上一个小三角上
注意：保证小三角叠加而来的边框与矩形边框一致，小三角竖直移动的距离不是矩形边框距离，两个小三角的垂直距离才是。
其实不用那么麻烦的，观察上方的图，我们可以画一个矩形设置两边的边框，然后旋转，移动到矩形上方。需要用到CSS3 ２Ｄ转换transform属性中的rotate()方法：元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
同时我们可以设置小三角也有圆角，我们采用边框画三角时，边框已经被用了，不能用来表示边框以及设置边框的形状，但是我们保留边框就比较灵活了。
注意：
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移位时比较简单，不用计算过多。
网友评论