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>

巴特西

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

最新文章

热门文章