Css--深入学习之三角形气泡窗

本文是作者从别的网站和文章学习了解的知识，简单做了个笔记，想要学习更多的可以参考这里：【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>