css如何製作三角形

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中文網其他相關文章！