April 4, 2012
How to create an arrow in css3?
Question by Rohit Azad
Answer by Starx
Just adding alternative using CSS3’s rotate
Demo
CSS
.arrow { width: 20px; height: 20px; overflow: hidden; }
.arrow span {
display: block;
border: 4px #000 solid;
background: #fff;
width: 14px;
height: 14px;
float:right;
margin-right: -12px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476, sizingMethod='auto expand');
zoom: 1;
}
HTML
<div class="arrow"><span></span></div>