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

你能夠在不少地方看到三角形（小三角）：tooltips提示框、下拉菜單、甚至在loading載入動畫裏。無論你喜歡仍是不喜歡，這些小元素對各UI元素之間的聯繫關係式很重要的。

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

點此查看實例展現

編碼 圖片

假如你已經有了三角形的圖片，而且減小HTTP請求，那麼將這個圖片轉換成一個BASE64字符串是最好的解決方案。

有用的工具（用於圖片轉換成BASE64編碼）:

• http://webcodertools.com/imagetobase64converter
• http://image2base64.wemakesites.net/

優勢

• 你能夠按照本身的思想設計陰影，漸變等，而後對其進行轉換編碼

缺點

• 你須要使用一個圖片編輯軟件去設計
• 對於較大的圖片，最終轉換成字符串佔用大小會很大
• 舊版本的瀏覽器，如：IE6/IE7是不兼容的

CSS 邊框

這也是一個經常使用的使用方式，如tooltips信息提示框和下拉菜單。以上的示例，這是一個我最喜歡的方法建立小並且有用的三角形。

優勢

• 很容易的經過修改一些CSS代碼屬性值而更改顏色和大小
• 這是一個跨瀏覽器的解決方案。

缺點

• 這個方式使用的是border,因此你不能添加陰影、漸變、和其餘一些CSS3效果
• 請記住，IE6是不支持透明邊界的-若是你關心這個問題
• 若是你使用火狐瀏覽器，要知道，CSS的「透明」有時可能不會是透明的，特別是在對角線邊框，越多更多 here.

HTML 字符

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

優勢

• 它是一個跨瀏覽器的技術
• 您可使用CSS3的text-shadow屬性添加陰影。

缺點

• 不能使用太多的CSS3效果，除了使用文字陰影。
• 在全部的瀏覽器，這是至關不可能實現像素完美。

CSS 旋轉正方形

理論上,這種方式，你須要使用兩個內容塊，可是，並無限制是使用兩個元素，因此可使用一個元素加一個僞元素。

• 建立一個內容裏。例如100×100像素 – 這將包含旋轉塊。
• 旋轉包含的這個塊45度，從而得到一個菱形
• 將菱形的塊向頂部便宜，而後設置溢出，設置父層容器截斷
• 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;
}

點此查看實例展現