
			<p>你可以在很多地方看到三角形（小三角）：tooltips提示框、下拉菜单、甚至在loading载入动画里。不管你喜欢还是不喜欢，这些小元素对各UI元素之间的联系关系式很重要的。</p>
<p>有一些不同的方法来设计并制作一个三角形，在本文中，我将介绍：</p>
<p><img src="http://www.daqianduan.com/wp-content/uploads/2012/10/webdesign-triangles.png" alt="" /></p>
<p><a class="btn-demo" href="http://www.daqianduan.com/example/?pid=4721" target="_blank">点此查看实例展示</a></p>
<h2>编码 图片</h2>
<p><img src="http://www.daqianduan.com/wp-content/uploads/2012/10/encoded-base64.png" alt="" width="600" height="200" /></p>
<p>假如你已经有了三角形的图片，并且减少HTTP请求，那么将这个图片转换成一个BASE64字符串是最好的解决方案。</p>
<h3>有用的工具（用于图片转换成BASE64编码）:</h3>
<ul>
<li><a href="http://webcodertools.com/imagetobase64converter">http://webcodertools.com/imagetobase64converter</a></li>
<li><a href="http://image2base64.wemakesites.net/">http://image2base64.wemakesites.net/</a></li>
</ul>
<h3>优点</h3>
<ul>
<li>你可以按照自己的思想设计阴影，渐变等，然后对其进行转换编码</li>
</ul>
<h3>缺点</h3>
<ul>
<li>你需要使用一个图片编辑软件去设计</li>
<li>对于较大的图片，最终转换成字符串占用大小会很大</li>
<li>旧版本的浏览器，如：IE6/IE7是不兼容的</li>
</ul>
<h2>CSS 边框</h2>
<p><img src="http://www.daqianduan.com/wp-content/uploads/2012/10/border-triangle.png" alt="" width="600" height="200" /></p>
<p>这也是一个常用的使用方式，如<strong>tooltips</strong>信息提示框和<strong>下拉菜单。</strong>以上的示例，这是一个我最喜欢的方法创建小而且有用的三角形。</p>
<h3>优点</h3>
<ul>
<li>很容易的通过修改一些CSS代码属性值而更改颜色和大小</li>
<li>这是一个跨浏览器的解决方案。</li>
</ul>
<h3>缺点</h3>
<ul>
<li>这个方式使用的是border,所以你不能添加阴影、渐变、和其他一些CSS3效果</li>
<li>请记住，IE6是不支持透明边界的-如果你关心这个问题</li>
<li>如果你使用火狐浏览器，要知道，CSS的“透明”有时可能不会是透明的，特别是在对角线边框，越多更多?<a href="http://coderwall.com/p/tpmsta">here</a>.</li>
</ul>
<h2>HTML 字符</h2>
<p><img src="http://www.daqianduan.com/wp-content/uploads/2012/10/entity-triangle.png" alt="" width="600" height="200" /><br />
它是基于使用可用的Unicode字符列表的字符。</p>
<h3>优点</h3>
<ul>
<li>它是一个跨浏览器的技术</li>
<li>您可以使用CSS3的text-shadow属性添加阴影。</li>
</ul>
<h3>缺点</h3>
<ul>
<li>不能使用太多的CSS3效果，除了使用文字阴影。</li>
<li>在所有的浏览器，这是相当不可能实现像素完美。</li>
</ul>
<h2>CSS 旋转正方形</h2>
<p><img src="http://www.daqianduan.com/wp-content/uploads/2012/10/cropped-triangle.png" alt="" width="600" height="200" /></p>
<p>理论上,这种方式，你需要使用两个内容块，但是，并没有限制是使用两个元素，所以可以使用一个元素加一个伪元素。</p>
<ul>
<li>创建一个内容里。例如100×100像素 &#8211; 这将包含旋转块。</li>
<li>旋转包含的这个块45度，从而获得一个菱形</li>
<li>将菱形的块向顶部便宜，然后设置溢出，设置父层容器截断</li>
<li>There you go!</li>
</ul>
<h3>优点</h3>
<ul>
<li>CSS3阴影，渐变等可以更多的使用</li>
</ul>
<h3>缺点</h3>
<ul>
<li>这个解决方案不是跨浏览器的,首先是因为CSS3旋转。</li>
</ul>
<h2>HTML5 Canvas</h2>
<p><span class="Apple-style-span" style="font-family: Consolas, Monaco, monospace; font-size: 12px; line-height: 18px;">在你的HTML文件中有以下的canvas元素：</span></p>
<pre style="margin: 15px 0; font: 100 12px/18px monaco, andale mono, courier new; padding: 10px 12px; border: #ccc 1px solid; border-left-width: 4px; background-color: #fefefe; color: #444;"><span style="color: #170;">&lt;canvas</span> <span style="color: #170;">id</span>=<span style="color: #a11;">"triangle"</span> <span style="color: #170;">height</span>=<span style="color: #a11;">"100"</span> <span style="color: #170;">width</span>=<span style="color: #a11;">"100"</span>&gt;<span style="color: #170;">Triangle</span><span style="color: #170;">&lt;</span>/<span style="color: #170;">canvas</span>&gt;</pre>
<p>这里的如何使用JavaScript绘制一个三角形：</p>
<pre style="margin: 15px 0; font: 100 12px/18px monaco, andale mono, courier new; padding: 10px 12px; border: #ccc 1px solid; border-left-width: 4px; background-color: #fefefe; color: #444;"><span style="color: #170;">var</span> <span style="color: #170;">canvas</span> = <span style="color: #170;">document</span>.<span style="color: #170;">getElementById</span><span style="color: #170;">(</span><span style="color: #a11;">'triangle'</span><span style="color: #170;">)</span>;
<span style="color: #170;">var</span> <span style="color: #170;">context</span> = <span style="color: #170;">canvas</span>.<span style="color: #170;">getContext</span><span style="color: #170;">(</span><span style="color: #a11;">'2d'</span><span style="color: #170;">)</span>;

<span style="color: #170;">context</span>.<span style="color: #170;">beginPath</span><span style="color: #170;">(</span><span style="color: #170;">)</span>;
<span style="color: #170;">context</span>.<span style="color: #170;">moveTo</span><span style="color: #170;">(0</span>, <span style="color: #164;">0</span><span style="color: #170;">)</span>;
<span style="color: #170;">context</span>.<span style="color: #170;">lineTo</span><span style="color: #170;">(100</span>, <span style="color: #164;">0</span><span style="color: #170;">)</span>;
<span style="color: #170;">context</span>.<span style="color: #170;">lineTo</span><span style="color: #170;">(50</span>, <span style="color: #164;">100</span><span style="color: #170;">)</span>;

<span style="color: #170;">context</span>.<span style="color: #170;">closePath</span><span style="color: #170;">(</span><span style="color: #170;">)</span>;

<span style="color: #170;">context</span>.<span style="color: #170;">fillStyle</span> = <span style="color: #a11;">"rgb(78, 193, 243)"</span>;
<span style="color: #170;">context</span>.<span style="color: #170;">fill</span><span style="color: #170;">(</span><span style="color: #170;">)</span>;</pre>
<h2>SVG (Scalable Vector Graphics)</h2>
<p><span class="Apple-style-span" style="font-family: Consolas, Monaco, monospace; font-size: 12px; line-height: 18px;">这是如何在您的标签，你可以定义一个内联SVG三角形：</span></p>
<pre style="margin: 15px 0; font: 100 12px/18px monaco, andale mono, courier new; padding: 10px 12px; border: #ccc 1px solid; border-left-width: 4px; background-color: #fefefe; color: #444;"><span style="color: #170;">&lt;svg</span> <span style="color: #170;">xmlns</span>=<span style="color: #a11;">"http://www.w3.org/2000/svg"</span> <span style="color: #170;">version</span>=<span style="color: #a11;">"1.1"</span> <span style="color: #170;">class</span>=<span style="color: #a11;">"svg-triangle"</span>&gt;
  <span style="color: #170;">&lt;polygon</span> <span style="color: #170;">points</span>=<span style="color: #a11;">"0,0 100,0 50,100"</span>/&gt;
<span style="color: #170;">&lt;</span>/<span style="color: #170;">svg</span>&gt;</pre>
<p><span class="Apple-style-span" style="font-family: Consolas, Monaco, monospace; font-size: 12px; line-height: 18px;">然后，只需添加一些样式：</span></p>
<pre style="margin: 15px 0; font: 100 12px/18px monaco, andale mono, courier new; padding: 10px 12px; border: #ccc 1px solid; border-left-width: 4px; background-color: #fefefe; color: #444;">.<span style="color: #170;">svg-triangle</span>{
	<span style="color: #000;">margin</span>: <span style="color: #164;">0</span> <span style="color: #164;">auto</span>;
	<span style="color: #000;">width</span>: <span style="color: #164;">100px</span>;
	<span style="color: #000;">height</span>: <span style="color: #164;">100px</span>;		
}		

.<span style="color: #170;">svg-triangle</span> <span style="color: #170;">polygon</span> {
	<span style="color: #000;">fill</span>:<span style="color: #219;">#98d02e</span>;
	<span style="color: #000;">stroke</span>:<span style="color: #219;">#65b81d</span>;
	<span style="color: #000;">stroke-width</span>:<span style="color: #164;">2</span>;
}</pre>
<p><a class="btn-demo" href="http://www.daqianduan.com/example/?pid=4721" target="_blank">点此查看实例展示</a></p>
<h2>最后的话</h2>
<p>我必须承认，我并没有介绍太多在最后两个方式在这篇文章中所描述的：Canvas和SVG。这是因为他们是非常强大的，我必须介绍因为未来他很强大。不管怎样，事实是，他们的能力远远大于这些微不足道的三角形。这些方法，建立三角形，让我知道你的想法，你更经常使用的是什么方法？</p>
<p>转载请注明：<a href="http://www.daqianduan.com">大前端</a> &raquo; <a href="http://www.daqianduan.com/css-arrow-3/">CSS创建三角形（小三角）的几种方法</a></p>		