用CSS画一个三角形？

Question

我知道你可以使用canvas元素绘制,我只是想知道是否可以在不使用canvas元素的情况下在链接旁边绘制一个三角形？我只想要一个小的<16px向下箭头.

Answer 1

这是我在css中绘制三角形的看法.你可以在JSFiddle上查看它.尚未进行任何浏览器测试(适用于Chrome!)

CSS非常简单:

.triangle{
display: block;
border-bottom: 16px solid transparent;
border-left: 16px solid red;
overflow: hidden;
position: absolute;
}

如果您希望它指向不同的方向,只需更改边框即可.例如,以下将指向三角形:

.triangle{
display: block;
border: 16px solid transparent;
border-top: 16px solid red;
overflow: hidden;
position: absolute;
}

编辑:适用于最新的IE,FF和Chrome.

Answer 2

不.

↓确切地说,最接近的是使用ASCII密钥.

它产生一个像这样的箭头↓

当然背景图像可以解决问题,但这很明显,不是吗？:)