用css实现三角形

通过上一篇文章大家应该都知道border的本质了吧，不清楚的同学可以去看一下这篇博文

http://www.cnblogs.com/nini-huai/p/5917368.html

下来我们说一下怎么实现各种三角形吧，先来说一下我自己的思路

大家先看这张图片

看过上一篇文章的应该都不陌生这个是怎样产生的，

其实大家仔细观察，相信不难看出我们中间区域设置的是各个梯形的上底边，那么当我们设置中间区域width：0的时候，出现的上下两个梯形的上底边都为0了，即就是我们需要的上三角形和下三角形了，同理，设置height：0的时候，我们的左右两个梯形的上底边均为0，这样我们的左三角形和右三角形就出现，

                             

 

 

下来我们就想办法实现三角形，首先我们去掉中间的白色区域部分，即设置高宽为0，效果如下

 

 

看到了吗，我们需要的各种三角形其实已经出来了，

上三角：只需要设置其他三个border边框的颜色为背景色即可，同理我们可以得到下三角，左三角以及右三角

现在我们做出来的都是直角的三角形，这是因为我们这是的border的宽度都是一样的，下来我们做一点不一样的

设置宽高不一样的时候就出现如上如所示的形状，首先每个三角形都不是等边直角三角了，其次，我们还可以让他两个边框都显示，即上图中的黄色和红色区域可以构成一个尖锐的三角形，当然了，你也可以随便组合.

我们可以利用这个做出一个简单的消息提示框，

结束语

   我们可以利用border属性做出很多的例子，这里我就先介绍到这里，其中的好处，大家细细品味吧！！