你可以在很多地方看到三角形(小三角):tooltips提示框、下拉菜单、甚至在loading载入动画里。不管你喜欢还是不喜欢,这些小元素对各UI元素之间的联系关系式很重要的。
1、编码 图片
假如你已经有了三角形的图片,并且减少HTTP请求,那么将这个图片转换成一个BASE64字符串是最好的解决方案。
有用的工具(用于图片转换成BASE64编码):
优点
你可以按照自己的思想设计阴影,渐变等,然后对其进行转换编码
缺点
你需要使用一个图片编辑软件去设计
对于较大的图片,最终转换成字符串占用大小会很大
旧版本的浏览器,如:IE6/IE7是不兼容的
2、css边框
1 .triangle{
2 border-color:black #fff #fff #fff;
3 border-style:solid;
4 border-width:100px 60px 0 60px;
5 height:0;
6 width:0;
7 }
这也是一个常用的使用方式,如tooltips信息提示框和下拉菜单。以上的示例,这是一个我最喜欢的方法创建小而且有用的三角形。
优点
很容易的通过修改一些CSS代码属性值而更改颜色和大小
这是一个跨浏览器的解决方案。
缺点
这个方式使用的是border,所以你不能添加阴影、渐变、和其他一些CSS3效果
请记住,IE6是不支持透明边界的-如果你关心这个问题
如果你使用火狐浏览器,要知道,CSS的“透明”有时可能不会是透明的,特别是在对角线边框,越多更多 here
3、html字符
.entity-triangle{font-size:32cm;color:#f7931d;text-shadow:0 7pz 7pz rgba(0,0,0,5);
}
▼
它是基于使用可用的Unicode字符列表的字符。
优点
它是一个跨浏览器的技术
您可以使用CSS3的text-shadow属性添加阴影。
缺点
不能使用太多的CSS3效果,除了使用文字阴影。
在所有的浏览器,这是相当不可能实现像素完美。
4、css旋转正方形
理论上,这种方式,你需要使用两个内容块,但是,并没有限制是使用两个元素,所以可以使用一个元素加一个伪元素。
创建一个内容里。例如100×100像素 – 这将包含旋转块。
旋转包含的这个块45度,从而获得一个菱形
将菱形的块向顶部便宜,然后设置溢出,设置父层容器截断
There you go!
优点
CSS3阴影,渐变等可以更多的使用
缺点
这个解决方案不是跨浏览器的,首先是因为CSS3旋转。
5、html5 canvas
在你的HTML文件中有以下的canvas元素:
Triangle
这里的如何使用JavaScript绘制一个三角形:
1 var canvas = document.getElementById('triangle');2 var context = canvas.getContext('2d');3
4 context.beginPath();5 context.moveTo(0, 0);6 context.lineTo(100, 0);7 context.lineTo(50, 100);8 context.closePath();9
10 context.fillStyle = "rgb(78, 193, 243)";11 context.fill();
6、SVG (Scalable Vector Graphics)
这是如何在您的标签,你可以定义一个内联SVG三角形:
然后,只需添加一些样式:
.svg-triangle{margin:0 auto;width:100px;height:100px;
}.svg-triangle polygon{fill:#98d02e;stroke:#65b81d;stroke-width:2;
}