纯Css绘制三角形箭头三种方法
2017-08-11 本文已影响1853人
是阿详
在制作网页的过程中少不了绘制类似图片的三角形箭头效果，虽然工程量不大，但是确实麻烦。在学习的过程中，总结了以下三种方法，以及相关的例子。
Uploading 6_095140.png
1、方法一：利用overflow:hidden;属性。
1 div.one{
2 margin-top: 30px;
3 width: 150px;
4 /* height: 60px;*/ /*文本高度由内容撑起*/
5 background-color: pink;
6
7 }
8 i{
9 font-style: normal;
10 display: inline-block;
11 width: 16px;
12 height: 8px; /*高度为s便签的一半*/
13 background-color: pink;
14
15 overflow: hidden; /*要点:设置隐藏属性 超出部分不显示*/
16
17 position: relative; /*微调 控制箭头在中间*/
18 top: 3px;
19
20 }
21 s{
22 text-decoration: none;
23 display: inline-block;
24 width: 16px;
25 height: 16px;
26 font-size: 16px;
27 line-height: 16px; /*设置字体 和 行高改变属性*/
28
29 /*利用微调 控制箭头方向 未设置向上*/
30 position: relative;
31 top: -9px;
32 }
2、方法二：使用after(before)属性定位 利用border画三角。
1 /*方法二*/
2 div.two{
3 margin-top: 30px;
4 width: 150px;
5 /*height: 60px;*/
6 background-color: #ddd;
7 }
8 a{
9 text-decoration: none;
10 }
11 /*使用伪元素a:after*/
12 /*可以再制作一个与背景色相同的三角利用定位覆盖 制作方法一的效果*/
13 a:after{
14 content: '';
15 display: inline-block;
16
17 /*利用边框boeder设置*/
18 /*border-left:5px solid transparent;
19 border-top:5px solid #fff;
20 border-right:5px solid transparent;
21 border-bottom-width:0px;*/
22
23 border:5px solid transparent;
24 border-top-color: #fff;
25
26 position: relative; /*微调位置*/
27 top: 5px;
28 left: 1px;
29
30 width: 0;
31 height: 0;
32 }
3、方法三：直接使用切图导入三角形图标
/*方法三*/
2 div.three{
3 margin-top: 30px;
4 width: 150px;
5 /*height: 60px;*/
6 background-color: #ddd;
7 }
8 div.three u{
9 display: inline-block;
10 width: 10px;
11 height: 7px;
12 background:url(jiantou.png) 2px -1389px no-repeat;
13 position: relative;
14 top: 2px;
15 }
以上三种方法的显示效果如下：
3种方法效果.png
二、相关使用案例
1、效果一：带尖角的盒子（聊天框）
1 .one{
2 width: 100px;
3 height: 50px;
4 margin: 30px;
5 background-color: pink;
6 border:5px solid red;
7 position: relative;
8 border-radius: 10px;
9 }
10 .one:before, .one:after{
11 content: '';
12 width: 0px;
13 height: 0px;
14 border:0px solid transparent;
15 position: absolute;
16 top: 50px;
17 left: 10px;
18 }
19 .one:before{
20 border-width: 16px;
21 border-top-color: red;
22 /*left: -5px;*/
23 }
24 .one:after{
25 border-width: 11px;
26 border-top-color: pink;
27 /*top: 5px;*/
28 left: 15px;
29 }
2、文字介绍框
1 .two{
2 margin: 30px;
3 width: 400px;
4 height: 100px;
5 /*background-color: #ddd;*/
6 border:1px solid red;
7 position: relative;
8 }
9 .two ul{
10 margin:30px;
11 }
12 .two ul li{
13 float: left;
14 /*width: 100px;*/
15 height: 26px;
16 line-height: 26px;
17 text-align: center;
18 padding-right: 13px;
19 background-color: #eee;
20 }
21
22 .two ul li:after{
23 content: '';
24 border-left:13px solid transparent;
25 border-top:13px solid #fff;
26 border-bottom:13px solid #fff;
27 border-right-width:0px;
28 position: absolute;
29 }
3、翻转效果
1 body{
2 background-color: #333;
3 }
4 a{
5 display: block;
6 width: 120px;
7 height: 32px;
8 line-height:32px;
9 text-align: center;
10 margin: 0 auto;
11 background-color: black;
12 color: #fff;
13 text-decoration: none;
14 font-size: 14px;
15 }
16 /*初始效果*/
17 a:before{
18 content: attr(title);
19 }
20 a:after{
21 content: '';
22 display: inline-block;
23 border-left:5px solid transparent;
24 border-top:5px solid #fff;
25 border-right:5px solid transparent;
26 border-bottom-width:0px;
27 position: relative;
28 top: -2px;
29 left: 3px;
30 }
31 /*点击效果*/
32 a:hover:before{
33 content: attr(opentitle);
34 }
35 a:hover:after{
36 border-left:5px solid transparent;
37 border-bottom:5px solid #fff;
38 border-right:5px solid transparent;
39 border-top-width:0px;
40 }
效果展示：
1、2效果.png
3效果.png
