是否可以制作不是典型的直角三角形的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);
 }