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

Question

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

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

然后我所要做的就是旋转和定位容器，然后填充箭头和BAM!那里有一个可爱的箭头:http://jsfiddle.net/uF69S/

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

我想创建这个箭头:

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

请注意箭头不是 90°。

注意:我知道边框三 Angular 形可用于制作任何 Angular 三 Angular 形，但是它们不在 Firefox、Opera 或 IE 中支持渐变，而 Firefox、Opera 和 IE 可以支持转换(以一种方式或另一个)。

Answer 1

您可以像这样使用倾斜来制作 120 度的三 Angular 形:

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

还有:http://jsfiddle.net/95Xq8/