用css實現三角形

經過上一篇文章你們應該都知道border的本質了吧，不清楚的同窗能夠去看一下這篇博文

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

下來咱們說一下怎麼實現各類三角形吧，先來講一下我本身的思路

你們先看這張圖片

看過上一篇文章的應該都不陌生這個是怎樣產生的，

其實你們仔細觀察，相信不難看出咱們中間區域設置的是各個梯形的上底邊，那麼當咱們設置中間區域width：0的時候，出現的上下兩個梯形的上底邊都爲0了，即就是咱們須要的上三角形和下三角形了，同理，設置height：0的時候，咱們的左右兩個梯形的上底邊均爲0，這樣咱們的左三角形和右三角形就出現，

                             

 

 

下來咱們就想辦法實現三角形，首先咱們去掉中間的白色區域部分，即設置高寬爲0，效果以下

 

 

看到了嗎，咱們須要的各類三角形其實已經出來了，

上三角：只須要設置其餘三個border邊框的顏色爲背景色便可，同理咱們能夠獲得下三角，左三角以及右三角

如今咱們作出來的都是直角的三角形，這是由於咱們這是的border的寬度都是同樣的，下來咱們作一點不同的

設置寬高不同的時候就出現如上如所示的形狀，首先每一個三角形都不是等邊直角三角了，其次，咱們還可讓他兩個邊框都顯示，即上圖中的黃色和紅色區域能夠構成一個尖銳的三角形，固然了，你也能夠隨便組合.

咱們能夠利用這個作出一個簡單的消息提示框，

結束語

   咱們能夠利用border屬性作出不少的例子，這裏我就先介紹到這裏，其中的好處，你們細細品味吧！！