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

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

css如何制作三角形？

教你用css做出三角形

今天Max分享一個用css制作三角形的技巧~
那三角形到底怎么做啊QAQ？？？
不急不急，我們一點一點來。

制作方法

首先我們寫一個p:

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

效果如下圖：

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

.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; }

效果圖：

推薦學習：《css視頻教程》