由css画三角形想到的

今天看到了一种效果，效果如下图：



其实这个用一张图片也能实现，但是为了更好的可操作性，加之我这人喜欢将东西简单化，这样才方便人去理解，去思考方法。下面且看我是怎么想的
看到这种效果我会想到下面是一个三角形，所以我想想方设法的去找css实现画三角形的相关信息，代码其实很简单，但是很难以让人想像，大家也可去做一个实验，只有知道了其原理，我们才更有把握对它进行任意的改造从而为我所用，代码如下：
Css部分
.abc {
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #7F7F9C;
color: #FFFFFF;
display: block;
height: 0;
margin-left: 52px;
overflow: hidden;
width: 0;
}
<div class="abc"></div>
这里定义了一个没有高度和宽度的div，然后分别给三个边框加宽度和颜色，记得这里只是加了三个边框的属性，第四个边框没有加。如果你想试验一下四个边框的可以用如下代码去研究一下：
.aaa {
display: block;
border-width: 30px 30px 30px 30px;
border-style: solid;
border-color: #cccccc #ff0000 #ffcc99 #06a;
position: absolute;
width: 0;
height: 0;
}
<div class="aaa"></div>
这里定义了四个边框分别为不同的颜色，我们在浏览器里可以看到这样的效果：



所以想当然的，如果想定义三角形，那就定义三个边框就行了，但还有一个问题，如果你的border-style属性不是solid的话，、在ie9里显示不出来是三角开，显示的还是四角形。
所以，以后这种弹出信息框也可以做出和移动设备上非常相似的效果来，