在工作中，我们可能会遇到气泡框相关的需求，如下图：
这个气泡框我们可以使用纯CSS代码来实现。接下来跟我一起一步步实现吧！
用CSS画三角形
用CSS画个三角形，相信大家都很熟悉了吧。主要思路：
- 将元素的的
宽高设置为0； - 然后设置相应的边框即可实现。详细来讲就是给某一方向的边框添加宽度以及颜色，然后将其旁边两个方向（或一个）的边框设置高度并且颜色设置为
transparent（即两边的颜色为透明）。
如下例子：
HTML代码:
<div class="root"></div>
CSS代码：
.root {
height: 0;
width: 0;
border-top: 50px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
对应的效果：
为了让不了解的同学看清楚点，我们把四个边框的颜色都填充上：
.root {
height: 0;
width: 0;
border-top: 50px solid red;
border-left: 50px solid yellow;
border-right: 50px solid blue;
border-bottom: 50px solid green;
}
效果如下：
气泡框
从上面我们已经知道了怎么用CSS画出三角形了，但是看我们开头的那个例子，那个尖尖的三角形是斜着的，我们仅仅通过设置border的宽度是达不到这种效果的，那该怎么办呢？
其实，我们弄一个非等腰的三角形，然后再通过旋转不就可以达到我们的效果了？嘿嘿，这时transform属性中的rotate()（不清楚的参考这）排上用场了！
正三角形的气泡框
首先我们先实现正的小角（这里我们用伪元素实现）的气泡框：
CSS代码：
.root {
height: 100px; /**/
width: 300px;
background-color: #FF7315;
position: relative; /* 将父元素设置相对定位，是伪元素可以根据父元素进行定位*/
margin: 300px auto;
}
.root::after {
content: '';
position: absolute; /* 通过绝对定位，设置 top、left、right、bottom 相关值，我们定位到想放置三角形的位置 */
top: 100px;
left: 120px;
border-top: 30px solid red; /* 为了看得更清楚，这里先设置一个与框框不同的颜色 */
border-left: 30px solid transparent;
border-right: 30px solid transparent;
}
效果如下：
斜三角形的气泡框
这时我们只需设置两条边框就行了，然后通过调整边框的宽度以及旋转的角度（transform: rotate()）以及对应的位置（top、left）来达到我们想要的效果：
.root::after {
content: '';
position: absolute;
top: 80px;
left: 120px;
border-top: 60px solid red;
border-left: 40px solid transparent;
transform: rotate(-30deg);
}
效果如下：
最后我们再把三角形的颜色设置成和方框的颜色一样即可：
最终完整的样式：
.root::after {
content: '';
position: absolute;
top: 80px;
left: 120px;
border-top: 60px solid #FF7315;
border-left: 40px solid transparent;
transform: rotate(-30deg);
}
效果：
总结
- 用CSS画三角形的方式：通过将元素的的
宽高设置为0，再给某一方向的边框添加宽度以及颜色，然后将其旁边两个方向的边框（或一个）设置高度并且颜色设置为transparent（即两边的颜色为透明）。 - 气泡框：通过
transform: rotate()将三角形进行旋转，并将三角形设置成跟大框一样的颜色再配合定位属性的调整，我们即可实现我们想要的气泡框效果。
