How to create an arrow in css3? [closed] - css

Question

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 10 years ago.
How to create arrow in css3?
As like this .
jsfiddle http://jsfiddle.net/BdSP4/1/

Answer 1

--- SEE DEMO ----
<div class="triangle-left">
<div></div>
</div>​
.triangle-left {
border-color: transparent black transparent transparent;
border-style: solid;
border-width: 20px;
width: 0;
height: 0;
}
.triangle-left div
{
border-color: transparent white transparent transparent;
border-style: solid;
border-width: 10px;
width: 0;
height: 0;
position:relative;
top:-9px;
left:0px;
}​
This is a triangle with a white triangle positioned inside, giving the appearance of an arrow. For more information on CSS3 triangles see here:
http://jonrohan.me/guide/css/creating-triangles-in-css/

Answer 2

See JsFiddle
HTML
<div class="angle"></div>
CSS
.angle:after { /* Thanks to :after just one div is necessary */
content: '.';
border-top: 20px solid #000; /* NW triangle gap */
border-bottom: 20px solid #000; /* SW triangle gap */
border-left: none;
border-right: 20px solid transparent; /* W triangle */
position: relative;
left: 20px;
}
.angle {
font-size: 0px; line-height: 0%; width: 0px; /* Necessary to not screw up the layout */
border-top: 20px solid transparent; /* NE triangle gap */
border-bottom: 20px solid transparent; /* SE triangle gap */
border-left: none;
border-right: 20px solid #000; /* E triangle */
}
Update: Smaller version
These are 2 overlapping triangles. One is black, one is white.
JsFiddle
Same HTML, different CSS
.angle:after {
content: '.';
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: none;
border-right: 10px solid white;
position: relative;
left: 5px;
}
.angle {
font-size: 0px; line-height: 0%; width: 0px; /* Necessary to not screw up the layout */
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: none;
border-right: 10px solid #000;
}

Answer 3

You don't have to use CSS 3 - create it with an HTML entity:
<span>‹</span>

Answer 4

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>