Question

I know that to create a basic arrow in CSS I can do this:

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

Then all I’ll have to do is rotate and position the container then fill the arrow-tip and BAM! there;s a sweet arrow: http://jsfiddle.net/uF69S/

However, I want an arrow where the tip is effectively a 120° angle, so is it possible to achieve this effect using CSS transforms or two different containers? Maybe a skew and a rotate?

I would like to create this arrow:

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

Notice that the arrowhead is not 90°.

NOTE:
I am aware that border triangle could be used to make any angle of triangle, however they do not support gradients in Firefox, Opera or IE, whereas Firefox, Opera and IE can support transforms (in one way or another).

Answer 1

You can use skew for making triangle of 120 degree like this:

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

Also : http://jsfiddle.net/95Xq8/