CSS建立三角形（小三角）的幾種方法

你可以在很多地方看到三角形（小三角）：tooltips提示框、下拉式功能表、甚至在loading載入動畫裡。不管你喜歡還是不喜歡，這些小元素對各UI元素之間的聯絡關係式很重要的。

有一些不同的方法來設計並製作一個三角形，在本文中，我將介紹：

點此查看執行個體展示 編碼 圖片

假如你已經有了三角形的圖片，並且減少HTTP請求，那麼將這個圖片轉換成一個BASE64字串是最好的解決方案。 有用的工具（用於圖片轉換成BASE64編碼）: http://webcodertools.com/imagetobase64converter http://image2base64.wemakesites.net/ 優點 你可以按照自己的思想設計陰影，漸層等，然後對其進行轉換編碼 缺點 你需要使用一個圖片編輯軟體去設計 對於較大的圖片，最終轉換成字串佔用大小會很大 舊版本的瀏覽器，如：IE6/IE7是不相容的 CSS 邊框

這也是一個常用的使用方式，如tooltips資訊氣球和下拉式功能表。以上的樣本，這是一個我最喜歡的方法建立小而且有用的三角形。

CSS邊框還有一種用法

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

優點 很容易的通過修改一些CSS代碼屬性值而更改顏色和大小 這是一個跨瀏覽器的解決方案。 缺點 這個方式使用的是border,所以你不能添加陰影、漸層、和其他一些CSS3效果 請記住，IE6是不支援透明邊界的-如果你關心這個問題 如果你使用Firefox瀏覽器，要知道，CSS的“透明”有時可能不會是透明的，特別是在對角線邊框，越多更多 here. HTML 字元

它是基於使用可用的Unicode字元列表的字元。

備忘：你可以右擊你的IME，從符號輸入中選擇三角形，此處三角形為文本。 優點 它是一個跨瀏覽器的技術 您可以使用CSS3的text-shadow屬性添加陰影。 缺點 不能使用太多的CSS3效果，除了使用文字陰影。 在所有的瀏覽器，這是相當不可能實現像素完美。 CSS 旋轉正方形

理論上,這種方式，你需要使用兩個內容塊，但是，並沒有限制是使用兩個元素，所以可以使用一個元素加一個虛擬元素。 建立一個內容裡。例如100×100像素 – 這將包含旋轉塊。 旋轉包含的這個塊45度，從而獲得一個菱形 將菱形的塊向頂部便宜，然後設定溢出，設定父層容器截斷（父元素使用 overflow:hidden; 進行截斷） There you go! 優點 CSS3陰影，漸層等可以更多的使用 缺點 這個解決方案不是跨瀏覽器的,首先是因為CSS3旋轉。 HTML5 Canvas

在你的HTML檔案中有以下的canvas元素：

<canvas id="triangle" height="100" width="100">Triangle</canvas>

這裡的如何使用JavaScript繪製一個三角形：

var canvas = document.getElementById('triangle');var context = canvas.getContext('2d');context.beginPath();context.moveTo(0, 0);context.lineTo(100, 0);context.lineTo(50, 100);context.closePath();context.fillStyle = "rgb(78, 193, 243)";context.fill();

SVG (Scalable Vector Graphics)

這是如何在您的標籤，你可以定義一個內聯SVG三角形：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-triangle">  <polygon points="0,0 100,0 50,100"/></svg>

然後，只需添加一些樣式：

.svg-triangle{margin: 0 auto;width: 100px;height: 100px;}.svg-triangle polygon {fill:#98d02e;stroke:#65b81d;stroke-width:2;}

點此查看執行個體展示 最後的話

我必須承認，我並沒有介紹太多在最後兩個方式在這篇文章中所描述的：Canvas和SVG。這是因為他們是非常強大的，我必須介紹因為未來他很強大。不管怎樣，事實是，他們的能力遠遠大於這些微不足道的三角形。這些方法，建立三角形，讓我知道你的想法，你更經常使用的是什麼方法。

轉載自：http://www.daqianduan.com/4721.html ，向大神致敬