Is it possible to make CSS triangles / arrows that are not your typical right-angled triangles with the gradient applied?

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 have to do is rotate and place the container, then fill in the arrowhead and BAM! there: sa sweet arrow: http://jsfiddle.net/uF69S/

However, I want an arrow where the tip is effectively 120 °; angle, so can this effect be achieved using CSS transformations or two different containers? Maybe skew and turn?

I would like to create this arrow:

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

Please note that the arrow is not 90 °.

Note: I know that the border triangle can be used to create any corner of the triangle, however they do not support support gradients in Firefox, Opera or IE, while Firefox, Opera and IE can support transformations (in one or the other).

Answer 1

You can use skew to create a 120 degree triangle as follows:

 .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/

Answer 2

This could be the beginning:

HTML:

 <div>▲</div>​ 

CSS

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

Look it up on JSFiddle

Answer 3

Do you mind using HTML5 Canvas? It is supported for IE9 + (per caniuse ).

This will help you get started: http://www.dbp-consulting.com/tutorials/canvas/CanvasArrow.html