用CSS画一个三角形？

Question

我知道你可以用canvas元素绘制，我只是想知道是否可以在不使用canvas元素的情况下在链接旁边绘制一个三角形？我只想要一个小的＆lt; 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键，↓是准确的。

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

当然，背景图像会起作用，但这很明显，不是吗？ ：）

Answer 3

U + 25BC：黑色向下指向三角形存在于Unicode中。这是：▼

您可以使用此CSS来应用它：

a:before {
    content: "▼";
}

尽管使用background-image可能更好。这样，您就不会依赖Web浏览器使用的字体中存在的此类特殊字符，它将显示在IE 6/7中。例如：

a {
    background-image: url("arrow.gif");
    padding-left: 16px;
}

Answer 4

没有。只需使用特殊的ASCII字符&#darr;，无需CSS：

<span id = "down-arrow">&#darr;</span>

Answer 5

这是我使用CSS的三角形的简单绘图：

<div style="border: 11px solid transparent; border-right-color: rgba(0, 0, 0, 0.25);"></div>

如果您需要更改方向，只需将 border-right-color 替换为 border- 方向 -color 。 也许您使用position: absolute;和margin-top以及margin-left属性来设置位置。