如何在HTML中製作三角形？

我想使用基本CSS在HTML頁面中製作三角形。我正在使用需要時間加載的三角形圖片，所以我想減少頁面的加載時間。如何在HTML中製作三角形？

2012-09-18 Ali

爲了理解這種形狀的作品和其他解決方案請參見http://stackoverflow.com/q/7073484/1811992 –

不可能的HTML，但與CSS。例如：

<div class="triangle></div>

.triangle { 
    width: 0; 
    height: 0; 
    border: solid 30px; 
    border-color: transparent transparent black transparent; 
}

現場演示：jsFiddle

在border屬性30px定義了尺寸：寬度和高度。如果你想要一個更小或更大的三角形，你可以改變它。
，開關black和transparent在border-color屬性的位置。見jsFiddle

來源

2012-09-18 18:58:44

注意，通過留下兩個邊界上，你得到直角三角形代替，它允許你生成你需要的任何三角形。看到我的答案和http://jsfiddle.net/GR4Kj/5/ http://www.uselesspickles.com/triangles/ –

這是一個關於如何創建CSS三角形的最好說明：http://www.uselesspickles.com/triangles/

通過沒有寬度或高度創建的div，邊界最終創造一個三角形，當你離開的一些邊界作爲透明。

貸款該頁面是由同事寫的，在別人想出這個竅門之前。

#tri { 
 
    width: 0; 
 
    height: 0; 
 
    border-top-width: 20px; 
 
    border-top-style: solid; 
 
    border-top-color: transparent; 
 
    border-right-width: 20px; 
 
    border-right-style: solid; 
 
    border-right-color: red; 
 
}

<div id="tri"></div>

jsFiddle demo

來源

2012-09-18 18:58:59

該演示令人印象深刻。 –

後面製作的CSS三角形訣竅是

創建一個空div
使其高度和寬度爲0。
給兩個相反的邊相同的邊框寬度，並使它們透明。
給第三個相同的邊框寬度，給它一個純色。

希望這會有所幫助。

入住這jsFiddle

來源

2012-09-18 19:00:47 mtk

不起作用。除非你錯過了解釋中的一步。 [的jsfiddle]（http://jsfiddle.net/mUaq4/）。 –

謝謝更新！請更新，如果你可以解釋它或有一些其他的想法/技巧相同。 – mtk

如何在HTML中製作三角形？

回答

相關問題