css - 是否可以制作不是典型直角三角形的 CSS 三角形/箭头，并应用渐变？

Question

我知道要在 CSS 中创建一个基本箭头，我可以这样做：

<div class="arrow-button">
    <span class="arrow-tip-container">
         <span class="arrow-tip"></span>
    </span>
</div>

然后我要做的就是旋转并定位容器，然后填充箭头和BAM！那里；一个甜蜜的箭头：http: //jsfiddle.net/uF69S/

但是，我想要一个箭头，其尖端实际上是 120° 角，那么是否可以使用 CSS 变换或两个不同的容器来实现这种效果？也许倾斜和旋转？

我想创建这个箭头：

------------\
|            \
|            /
------------/

请注意，箭头不是90°。

注意： 我知道边界三角形可以用来制作任何角度的三角形，但是它们不支持 Firefox、Opera 或 IE 中的渐变，而 Firefox、Opera 和 IE 可以支持变换（以一种或另一种方式）。

score 10 · Accepted Answer

您可以使用 skew 制作 120 度的三角形，如下所示：

.arrow-tip {
    display:block;
    width:50px;
    height:50px;
    margin:0 0 0 -20px;
    -webkit-transform:rotate(45deg) skew(20deg,20deg);
 }

score 3 · Accepted Answer

这可能是一个开始：

HTML：

<div>▲&lt;/div>

CSS：

div {
  font-size: 46px;
  -webkit-transform: scaleY(.3);
}

score 1 · Accepted Answer

你反对使用 HTML5 Canvas 吗？它支持 IE9+（每个caniuse）。

3 回答 3