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;
}

点此查看实例展现