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

你可以在很多地方看到三角形（小三角）：tooltips提示框、下拉菜单、甚至在loading载入动画里。不管你喜欢还是不喜欢，这些小元素对各UI元素之间的联系关系式很重要的。

有一些不同的方法来设计并制作一个三角形，在本文中，我将介绍：

点此查看实例展示

编码 图片

假如你已经有了三角形的图片，并且减少HTTP请求，那么将这个图片转换成一个BASE64字符串是最好的解决方案。

有用的工具（用于图片转换成BASE64编码）:

优点

你可以按照自己的思想设计阴影，渐变等，然后对其进行转换编码

缺点 CSS 边框

这也是一个常用的使用方式，如tooltips信息提示框和下拉菜单。以上的示例，这是一个我最喜欢的方法创建小而且有用的三角形。

优点

很容易的通过修改一些CSS代码属性值而更改颜色和大小

这是一个跨浏览器的解决方案。

缺点 HTML 字符

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

优点

它是一个跨浏览器的技术

您可以使用CSS3的text-shadow属性添加阴影。

缺点

不能使用太多的CSS3效果，除了使用文字阴影。

在所有的浏览器，这是相当不可能实现像素完美。

CSS 旋转正方形

理论上,这种方式，你需要使用两个内容块，但是，并没有限制是使用两个元素，所以可以使用一个元素加一个伪元素。

优点

CSS3阴影，渐变等可以更多的使用

缺点

这个解决方案不是跨浏览器的,首先是因为CSS3旋转。

HTML5 Canvas

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

=/canvas>

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

; ; ; ; ; ; ; context.fillStyle = "rgb(78, 193, 243)"; ; SVG (Scalable Vector Graphics)

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

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

点此查看实例展示

最后的话

我必须承认，我并没有介绍太多在最后两个方式在这篇文章中所描述的：Canvas和SVG。这是因为他们是非常强大的，我必须介绍因为未来他很强大。不管怎样，事实是，他们的能力远远大于这些微不足道的三角形。这些方法，建立三角形，让我知道你的想法，你更经常使用的是什么方法？

AD：【优秀主题】tob主题正式发布，够炫酷！ 完美的自适应布局，完善的图片站配置

未经允许不得转载：大前端 » CSS创建三角形（小三角）的几种方法

标签：CSS前端技巧

lyushine 这家伙很懒，什么也没留下~

上一篇
携程UED聘HTML+CSS高手（携程上海总部） 下一篇
50个优秀的web配色界面分享

相关推荐