css製作三角形的方法：先建立一個HTML範例檔；然後建立一個p；最後透過「border-color: transparent transparent red transparent;」等屬性來實現三角形效果即可。
本文操作環境：windows7系統、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，上下左右的邊框為紅、藍、紫、橙。 （是不是圖案很漂亮？）
那你會問這跟三角形有什麼關係？
來，我們進行下一步：把p的寬高設為0；
你會發現螢幕上有一個四色正方形，而這個正方形恰巧是由四個三角形的邊框組成的。
這時候只要取你想要的方向，把其他三角形設為透明就好了。
這裡提示一下大家，屬性透明為（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影片教學》
以上是css如何製作三角形的詳細內容。更多資訊請關注PHP中文網其他相關文章！
