CODEWITHSUNDEEP
css
user3848987
user3848987

Reputation: 1657

Possible to create real arrow via CSS and rotate it?

Is it possible to create a complete arrow using CSS?

This is how I create just the head of the arrow: 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 part of the arrow. Just to look like this:

Arrow

And after this I want to rotate the CSS-arrow, so I would be able to use it dynamically... i.e. pointing to the top, left, 45°...

Upvotes: 3

Views: 555

Answers (1)

user3142695
user3142695

Reputation: 17352

Just have 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;
}

Upvotes: 3

Related Questions