是否可以制作不是典型的直角三角形的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可以支持变换（以一种方式或另一个）。

Answer 1

您可以使用倾斜来制作120度的三角形：

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

另外：http://jsfiddle.net/95Xq8/

Answer 2

这可能是一个开始：

HTML：

<div>▲</div>​

CSS：

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

在JSFiddle

上查看

Answer 3

您是否反对使用HTML5 Canvas？它支持IE9 +（每caniuse）。

这会让你开始： http://www.dbp-consulting.com/tutorials/canvas/CanvasArrow.html