Can I create a real arrow through CSS and rotate it?
Is it possible to create a full arrow using CSS?
This is how I create just the arrow head: http://jsfiddle.net/2fsoz6ye/
#demo:after {
content: ' ';
height: 0;
position: absolute;
width: 0;
border: 10px solid transparent;
border-top-color: #333;
}
But I also need the back of the arrow. Just to look like this:
And after that I want to rotate the CSS arrow so that I can use it dynamically ... i.e. pointing up, left, 45 ° ...
+3
source to share
1 answer
Just take a look at this fiddle: http://jsfiddle.net/2fsoz6ye/2/
.container{
transform: rotate(30deg);
width:60px; height:40px; background:#ccc; margin:100px auto;}
.arrow-right {
width: 0;
height: 0;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 40px solid #ccc;
float:right;
margin-top:-20px;
margin-right:-40px;
}
+3
source to share