最近看到那种带箭头的提示框，忽然想看一下到底什么原理，也就去网上搜了一下，现在总结一下实现方法。
大概也就三种方法。
第一种方法就是纯粹的利用div的边框
图中A和B，C和D分别是一对实现向右和向左箭头的前后图。
看图A：
<div class="arrow-right-a"></div>
CSS:
.arrow-right-a {
width: 0;
height: 0;
border-left: 20px solid #ccc;
border-top: 10px solid #000;
border-bottom: 10px solid #000;
border-right: 10px solid #ccc;
}把div的高和宽都设为0，然后设置这个div的四个边框，边框宽度设置大一点。
最终看效果（图A）。
我们可以看到四个边框都是三角形的，那么我们是不是可以让其中的任意三个边框透明，只显示一个三角形，是不是就可以得到四个方向的箭头了呢？
看图B：
<div class="arrow-right-b"></div>
CSS:
.arrow-right-b {
width: 0;
height: 0;
border-left: 20px solid #ccc;
border-top: 10px solid rgba(0 , 0, 0 , 0);
border-bottom: 10px solid rgba(0 , 0, 0 , 0);
}设置左边框颜色是灰色，上边框和下边框透明，就得到了图B的效果。
图C和图D是同样的原理。
第二种方法就是上面的方法加上css的伪类:before和:after
图E：
<div style="position:relative"> <div class="tip">向左的箭头: 只有三个边：上、下、右。而 < | 总体来看，向左三角形的高=上+下边框的长度。 宽=右边框的长度 向右的箭头: 只有三个边：上、下、左。而 |> 总体来看，向右三角形的高=上+下边框的长度。 宽=左边框的长度 向上的箭头,类似于A,只有三个边，不能指定上边框 </div> </div>
先设置好主体内容的css：
.tip {
width: 200px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
box-shadow: 0 0 10px #ccc;
}然后在tip前面插入内容：
.tip:before {
content: "";
border-right: 10px solid #ccc;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
position: absolute;
left: -10px;
top: 20px;
}内容是空，其他的边框设置根据需要和第一种方法一致。
:before伪类插入的内容默认是显示在div内容的开头。
所以我们要用定位去重新固定到需要的位置。
看效果，问题来了，这个箭头和第一种方法实现的是一样的，里面有颜色，和我们的主体背景不一致，很不和谐。
好，下面就要用到:after伪类了。
.tip:after {
content: "";
border-right: 10px solid #fff;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
position: absolute;
left: -9px;
top : 20px;
}这个的边框颜色设置成和主体背景颜色相一致，然后定位到before的内容除，覆盖掉before，空出1px不被覆盖即可。
效果如图E。
第三种方法就是要用到css3的旋转了
原理就是给一个div固定的宽和高，设置这个div的边框颜色和阴影，然后旋转这个div到适合的角度，
然后外面再包一层div，让它的子div超出它，超出的隐藏掉。
HTML：
<div class="tip-b"> <div class="arrow-outer"><div class="arrow-left-a-a"></div></div> <div class="tip-content"> 向左的箭头: 只有三个边：上、下、右。而 < | 总体来看，向左三角形的高=上+下边框的长度。 宽=右边框的长度 向右的箭头: 只有三个边：上、下、左。而 |> 总体来看，向右三角形的高=上+下边框的长度。 宽=左边框的长度 向上的箭头,类似于A,只有三个边，不能指定上边框 </div> </div>
arrow-outer就是箭头的父级，css是：
.arrow-outer {
width: 30px;
height: 30px;
position: absolute;
top: 20px;
left: -29px;
overflow: hidden;
display: inline-block;
}关键是overflo:hidden。
然后是箭头arrow-left-a-a：
.arrow-left-a-a {
width: 20px;
height: 20px;
border: 1px solid #ccc;
box-shadow: 0 0 5px #ccc;
position: absolute;
left: 20px;
top: 3px;
transform:rotate(45deg);
background-color: #fff;
}旋转45度，背景和主体背景一致。
旋转的目的就是让这个div互相垂直的两边形成指向，然后用定位让它超出他的父级div(.arrow-outer),超出的部分就是不需要的部分，自然会被隐藏。
最终就会形成箭头。
边框透明的话用rgba和transparent都是一样的，随便用哪个。
示例完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 箭头Demo</title>
<style type="text/css">
body {
padding-left: 20px;
}
/* rgba:
R：红色值。正整数 | 百分数
G：绿色值。正整数 | 百分数
B：蓝色值。正整数| 百分数
A：透明度。取值0~1之间
*/
.arrow-right-a {
width: 0;
height: 0;
border-left: 20px solid #ccc;
border-top: 10px solid #000;
border-bottom: 10px solid #000;
border-right: 10px solid #ccc;
}
.arrow-right-b {
width: 0;
height: 0;
border-left: 20px solid #ccc;
border-top: 10px solid rgba(0 , 0, 0 , 0);
border-bottom: 10px solid rgba(0 , 0, 0 , 0);
}
.arrow-left-a{
width: 0;
height: 0;
border-right: 20px solid #ccc;
border-top: 10px solid #000;
border-bottom: 10px solid #000;
}
.arrow-left-b{
width: 0;
height: 0;
border-right: 20px solid #ccc;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
.tip {
width: 200px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
box-shadow: 0 0 10px #ccc;
}
.tip:before {
content: "";
border-right: 10px solid #ccc;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
position: absolute;
left: -10px;
top: 20px;
}
.tip:after {
content: "";
border-right: 10px solid #fff;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
position: absolute;
left: -9px;
top : 20px;
}
.arrow-left-a-a {
width: 20px;
height: 20px;
border: 1px solid #ccc;
box-shadow: 0 0 5px #ccc;
position: absolute;
left: 20px;
top: 3px;
transform:rotate(45deg);
background-color: #fff;
}
.tip-b {
position: relative;
}
.arrow-outer {
width: 30px;
height: 30px;
position: absolute;
top: 20px;
left: -29px;
overflow: hidden;
display: inline-block;
}
.tip-content {
width: 200px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
box-shadow: 0 0 10px #ccc;
display: inline-block;
}
</style>
</head>
<body>
<div class="arrow-right-a"></div>
<br>
<div class="arrow-right-b"></div>
<br>
<div class="arrow-left-a"></div>
<br>
<div class="arrow-left-b"></div>
<br>
<div style="position:relative">
<div class="tip">向左的箭头: 只有三个边：上、下、右。而 < | 总体来看，向左三角形的高=上+下边框的长度。 宽=右边框的长度 向右的箭头: 只有三个边：上、下、左。而 |> 总体来看，向右三角形的高=上+下边框的长度。 宽=左边框的长度 向上的箭头,类似于A,只有三个边，不能指定上边框 </div>
</div>
<br>
<div class="tip-b">
<div class="arrow-outer"><div class="arrow-left-a-a"></div></div>
<div class="tip-content">
向左的箭头: 只有三个边：上、下、右。而 < | 总体来看，向左三角形的高=上+下边框的长度。 宽=右边框的长度 向右的箭头: 只有三个边：上、下、左。而 |> 总体来看，向右三角形的高=上+下边框的长度。 宽=左边框的长度 向上的箭头,类似于A,只有三个边，不能指定上边框
</div>
</div>
</body>
</html>本文链接：https://360us.net/article/12.html