css - 用 CSS 画三 Angular 形？

Question

我知道您可以使用 canvas 元素进行绘制，我只是想知道是否可以在不使用 canvas 元素的情况下在链接旁边绘制一个三 Angular 形？我只想要一个 < 16px 的小向下箭头。

Answer 1

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

CSS 非常简单:

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

如果您希望它指向不同的方向，只需更改边框即可。例如，以下将使三 Angular 形指向下方:

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

编辑:适用于最新的 IE、FF 和 Chrome。