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