本文是作者从别的网站和文章学习了解的知识，简单做了个笔记，想要学习更多的可以参考这里：【css进阶】伪元素的妙用--单标签之美，奇思妙想
一、三角形的实现
首先，先画了三角形，后面二、三都是根据这个 衍生而来的。
第一步，Css，很简单border就可以实现了，下面就是一个三角形的css
article{ float:left; margin-left:80px; }
.Triangle{
width:0px;
border:100px solid transparent;
border-top-color:#00aabb;
}
第二步，Html
然后想要实现左三角，在三角形的css基础上，加一个 border-right:0；
右三角，加一个 border-left:0；
<article>
<h3>一、三角形</h3>
<div class="Triangle"></div>
</article>
<article>
<h5>二、左三角形</h5>
<div class="Triangle" style="border-right:0;"></div>
</article>
<article>
<h5>三、右三角形</h5>
<div class="Triangle" style="border-left:0;"></div>
</article>
最后，有什么用呢，可以做对话框或气泡框一类的东西啦！比如说：
同样道理，其实就是一个带圆角的矩形与三角形拼接而成的罢了，所以只用写好第一个三角气泡，后面就是根据他衍生出来的而已
第一步，Css
先建立一个带圆角的矩形，这个就不用教了，有点基础的都会
后面就是利用为元素:after来为圆角矩形添加小三角了，然后小三角根据圆角矩形去定位就OK了，
/*气泡矩形*/
.ract{
position:position;
width:260px;
height:120px;
background-color:#0094ff;
border-radius:10px;
} /*三角气泡*/
.TrBubble:after{
content:"";
position:absolute;
bottom:;
left:50%;
border:34px solid transparent;
border-top-color:#0094ff;
border-bottom:;
margin:0 0 -34px -34px;
} /*左三角气泡*/
.LeftBubble:after{
content:"";
position:absolute;
bottom:;
left:50%;
border:34px solid transparent;
border-top-color:#0094ff;
border-bottom:;
margin:0 0 -34px -34px;
border-left:;
} /*右三角气泡*/
.RightBubble:after{
content:"";
position:absolute;
bottom:;
left:50%;
border:34px solid transparent;
border-top-color:#0094ff;
border-bottom:;
margin:0 0 -34px -34px;
border-right:;
}
第二步，Html
<article>
<section>
<h3>一、三角气泡</h3>
<div class="ract TrBubble"></div>
</section>
<section>
<h5>二、左三角气泡</h5>
<div class="ract LeftBubble"></div>
</section>
<section>
<h5>三、右三角气泡</h5>
<div class="ract RightBubble"></div>
</section>
</article>