使用CSS画一个三角形？

Question

我知道你可以使用canvas元素绘制图形，但我想知道是否有可能在不使用canvas元素的情况下在链接旁边绘制一个三角形？ 我只需要一个小于16px的向下箭头。

- ComputerUser

---

我的初步反应是“不，CSS 不会绘制任何东西，它只能样式化，使用图像背景”，但我相信肯定会有人想出一些巧妙的方法... :) - deceze

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中可以使用。

- Russell Dias

Answer 2

不行。

最接近的方法是使用ASCII键，确切地说是↓。

它会产生这样的箭头 ↓

当然，使用background-image也可以达到效果，但那太显而易见了，不是吗？ :)

- Marko

Answer 3

Unicode中存在U+25BC：黑色向下三角形，如下所示：▼

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

a:before {
    content: "▼";
}

最好使用background-image。这样，您就不需要依赖于Web浏览器使用的字体中是否存在这些特殊字符，并且它会在IE 6/7中显示。例如：

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

- PleaseStand

Answer 4

不需要使用CSS，只需使用一个特殊的ASCII字符&#darr;即可：

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

- Alex

Answer 5

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

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

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

- Mohammad Anini