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).
Arrows. To create a simple arrow without a tail, make a box with a width and height, border, as well as zero left and top borders. To make an up arrow, add the transform: rotate(225deg); property, and to make a down arrow, add the transform: rotate(45deg); property to rotate the arrow to 225 and 45 degrees respectively ...
The idea is a box with zero width and height. The actual width and height of the arrow is determined by the width of the border. In an up arrow, for example, the bottom border is colored while the left and right are transparent, which forms the triangle.
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/
This might be a start:
HTML:
<div>▲</div>
CSS:
div {
font-size: 46px;
-webkit-transform: scaleY(.3);
}
View it on JSFiddle
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With