css 创建三角形（小三角）的几种方法

1。编码图片

           假如你已经有三角形图片，并且减少HTTP的请求，那么将图片转化成Base64字符串是最好的解决方案。
 　　
优点：你可以按照自己的思路设计阴影，渐变等，然后对其进行转化编码
缺点：你需要使用图片编辑器，对于较大图片，最终转化的字符串占用大小会很大。旧版浏览器不兼容
 
 
2。
 这也是一个常用的使用方式，如tooltips信息提示框和下拉菜单。以上的示例，这是一个我最喜欢的方法创建小而且有用的三角形
优点：
  • 很容易的通过修改一些CSS代码属性值而更改颜色和大小
  • 这是一个跨浏览器的解决方案。
缺点：
  • 这个方式使用的是border,所以你不能添加阴影、渐变、和其他一些CSS3效果
  • 请记住，IE6是不支持透明边界的-如果你关心这个问题
  • 如果你使用火狐浏览器，要知道，CSS的“透明”有时可能不会是透明的，特别是在对角线边框，越多更多
 
3.它是基于使用可用的Unicode字符列表的字符。

优点

  • 它是一个跨浏览器的技术
  • 您可以使用CSS3的text-shadow属性添加阴影。

缺点

  • 不能使用太多的CSS3效果，除了使用文字阴影。
  • 在所有的浏览器，这是相当不可能实现像素完美。
 
 
4.HTML5 Canvas

在你的HTML文件中有以下的canvas元素：

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

这里的如何使用JavaScript绘制一个三角形：

varcanvas = document.getElementById('triangle');
varcontext = 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();
5.SVG (Scalable Vector Graphics)

这是如何在您的标签，你可以定义一个内联SVG三角形：

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

然后，只需添加一些样式：

.svg-triangle{
	margin: 0auto;
	width: 100px;
	height: 100px;		
}		

.svg-trianglepolygon {
	fill:#98d02e;
	stroke:#65b81d;
	stroke-width:2;
}

 

posted @ 2016-04-19 13:52  he0xff  阅读(1089)  评论(0)    收藏  举报