由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里显示不出来是三角开，显示的还是四角形。

所以，以后这种弹出信息框也可以做出和移动设备上非常相似的效果来，