纯Css绘制三角形箭头三种方法

　　在制作网页的过程中少不了绘制类似图片的三角形箭头效果，虽然工程量不大，但是确实麻烦。在学习的过程中，总结了以下三种方法，以及相关的例子。

一、三种绘制三角形箭头方法

　　　　

　　1、方法一：利用overflow:hidden;属性。

　　　　

 div.one{
             margin-top: 30px;
             width: 150px;
             /* height: 60px;*/   /*文本高度由内容撑起*/
             background-color: pink;

         }
         i{
             font-style: normal;
             display: inline-block;
             width: 16px;
             height: 8px;  /*高度为s便签的一半*/
             background-color: pink;

             overflow: hidden;  /*要点:设置隐藏属性 超出部分不显示*/

             position: relative;  /*微调  控制箭头在中间*/
             top: 3px;

         }
         s{
             text-decoration: none;
             display: inline-block;
             width: 16px;
             height: 16px;
             font-size: 16px;
             line-height: 16px; /*设置字体 和 行高改变◇属性*/

             /*利用微调 控制箭头方向 未设置向上*/
             position: relative;
             top: -9px;
         }

　　2、方法二：使用after(before)属性定位  利用border画三角。

 /*方法二*/
         div.two{
             margin-top: 30px;
             width: 150px;
             /*height: 60px;*/
             background-color: #ddd;
         }
         a{
             text-decoration: none;
         }
         /*使用伪元素a:after*/
         /*可以再制作一个与背景色相同的三角利用定位覆盖  制作方法一的效果*/
         a:after{
             content: '';
             display: inline-block;

             /*利用边框boeder设置*/
             /*border-left:5px solid transparent;
               border-top:5px solid #fff;
               border-right:5px solid transparent;
               border-bottom-width:0px;*/

               border:5px solid transparent;
               border-top-color: #fff;

               position: relative;  /*微调位置*/
               top: 5px;
               left: 1px;

               width: 0;
               height: 0;
         }

　　3、方法三：直接使用切图导入三角形图标

     /*方法三*/
         div.three{
             margin-top: 30px;
             width: 150px;
             /*height: 60px;*/
             background-color: #ddd;
         }
         div.three u{
             display: inline-block;
             width: 10px;
             height: 7px;
             background:url(jiantou.png) 2px -1389px no-repeat;
             position: relative;
             top: 2px;
         }

　　

以上三种方法的显示效果如下：

　　　　　　　　　　　　

二、相关使用案例

　　　　

　　1、效果一：带尖角的盒子（聊天框）

 .one{
             width: 100px;
             height: 50px;
             margin: 30px;
             background-color: pink;
             border:5px solid red;
             position: relative;
             border-radius: 10px;
         }
         .one:before, .one:after{
             content: '';
             width: 0px;
             height: 0px;
             border:0px solid transparent;
             position: absolute;
             top: 50px;
             left: 10px;
         }
         .one:before{
             border-width: 16px;
               border-top-color: red;
               /*left: -5px;*/
         }
         .one:after{
             border-width: 11px;
               border-top-color: pink;
               /*top: 5px;*/
               left: 15px;
         }

　　

　　2、文字介绍框

 .two{
             margin: 30px;
             width: 400px;
             height: 100px;
             /*background-color: #ddd;*/
             border:1px solid red;
             position: relative;
         }
         .two ul{
             margin:30px;
         }
         .two ul li{
             float: left;
             /*width: 100px;*/
             height: 26px;
             line-height: 26px;
             text-align: center;
             padding-right: 13px;
             background-color: #eee;
         }

         .two ul li:after{
             content: '';
             border-left:13px solid transparent;
               border-top:13px solid #fff;
               border-bottom:13px solid #fff;
               border-right-width:0px;
               position: absolute;
         }

　　

　　3、翻转效果

 body{
             background-color: #333;
         }
         a{
             display: block;
             width: 120px;
             height: 32px;
             line-height:32px;
             text-align: center;
             margin: 0 auto;
             background-color: black;
             color: #fff;
             text-decoration: none;
             font-size: 14px;
         }
         /*初始效果*/
         a:before{
             content: attr(title);
         }
         a:after{
             content: '';
             display: inline-block;
             border-left:5px solid transparent;
               border-top:5px solid #fff;
               border-right:5px solid transparent;
               border-bottom-width:0px;
               position: relative;
               top: -2px;
               left: 3px;
         }
         /*点击效果*/
         a:hover:before{
             content: attr(opentitle);
         }
         a:hover:after{
             border-left:5px solid transparent;
               border-bottom:5px solid #fff;
               border-right:5px solid transparent;
               border-top-width:0px;
         }

效果展示：

　　　　       

end...