用css实现三角形

经过上一篇文章你们应该都知道border的本质了吧，不清楚的同窗能够去看一下这篇博文

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

下来咱们说一下怎么实现各类三角形吧，先来讲一下我本身的思路

你们先看这张图片

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

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

                             

 

 

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

 

 

看到了吗，咱们须要的各类三角形其实已经出来了，

上三角：只须要设置其余三个border边框的颜色为背景色便可，同理咱们能够获得下三角，左三角以及右三角

如今咱们作出来的都是直角的三角形，这是由于咱们这是的border的宽度都是同样的，下来咱们作一点不同的

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

咱们能够利用这个作出一个简单的消息提示框，

结束语

   咱们能够利用border属性作出不少的例子，这里我就先介绍到这里，其中的好处，你们细细品味吧！！