用css製作三角形

用css製作三角形，主要是利用css元素給「盒模型」設定邊框得到的。

上圖，上邊框和做邊框，以及上邊框和右邊框的交合處，瀏覽器會按照直角的二分之一處繪製交合線。這是「盒模型」有寬和高時候的效果。我們假設一下，如果把寬和高設定成0px，同時讓邊框的寬度更寬一點情況會怎樣那？css**如下：

.tip1

效果圖如下：

當把「盒模型」的寬和高都設定成0px時，「盒模型」的每條邊都變成了三角形，那如果我們需要乙個向下的三角形，是不是把左、右、下的邊設定成透明就可以了那？我們看一下效果：

.tip2

是的，我們得到了向下的三角形了，只不過這個三角形比較扁平，不太美觀。我們需要調整一下。既然是向下的三角形，我們可以讓它的下邊框的寬度為0，只設定上邊框，來控制整個三角形的高度，設定左右邊框來控制三角形的寬度。**修改如下：

.tip3

效果如下：

現在看起來好多了。同理我們也可以根據需求製作朝左、右、上的三角行了，大家可以回去試一下。

附：結合css3三角形的應用，**如下：

<
p class
="box"
>哈哈我是測試**
p>

.box.box::after

效果圖如下: