css制作三角形的方法：首先創(chuàng)建一個(gè)HTML示例文件；然后創(chuàng)建一個(gè)p；最后通過(guò)“border-color: transparent transparent red transparent;”等屬性實(shí)現(xiàn)三角形效果即可。

本文操作環(huán)境：windows7系統(tǒng)、HTML5&&CSS3版，DELL G3電腦

css如何制作三角形？

教你用css做出三角形

今天Max分享一個(gè)用css制作三角形的技巧~
那三角形到底怎么做啊QAQ？？？
不急不急，我們一點(diǎn)一點(diǎn)來(lái)。

制作方法

首先我們寫(xiě)一個(gè)p:

.triangle{     height: 100px;     width: 100px;     border:100px solid ;     border-color: red orange blue purple; }

效果如下圖：

那么這個(gè)類名為p1的p就是一個(gè)寬高為100px的正方形，它的邊框?yàn)?00px，上下左右的邊框?yàn)榧t、藍(lán)、紫、橙。（是不是圖案很漂亮？）
那你會(huì)問(wèn)這和三角形有什么關(guān)系？
來(lái)，我們進(jìn)行下一步：把p的寬高設(shè)為0；
你會(huì)發(fā)現(xiàn)屏幕上有一個(gè)四色正方形，而這個(gè)正方形恰巧是由四個(gè)三角形的邊框組成的。
這時(shí)候只要取你想要的方向，把其他三角形設(shè)為透明就好了。
這里提示一下大家，屬性透明為（transparent）。
比如咱們要一個(gè)紅色、箭頭向上的三角形，代碼如下：

.triangle-red{     height: 0px;     width: 0px;     border:100px solid ;     border-color: transparent transparent red transparent; }

效果如下圖：

趕緊試試吧！我們還能做出左上、左下、右上、右下的三角形，例如左上：

.triangle-red{     height: 0px;     width: 0px;     border-top: 100px solid red;     border-right: 100px solid transparent; }

效果圖：

推薦學(xué)習(xí)：《css視頻教程》