CODEWITHSUNDEEP
htmlcss
1110
1110

Reputation: 6839

How to use :after to rotate arrow as I want

I have a little issue.
I need to get image like bellow but can't set arrow as I want but I think that I am close :)
http://jsfiddle.net/LDhLv/

.d:after {
    content: "";
position: absolute;
width: 0;
height: 0;
bottom: 95%;
left: 100px;
border-left: 10px solid #666;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-top: 0px solid transparent;
}


enter image description here

Upvotes: 0

Views: 85

Answers (3)

Fillip Peyton
Fillip Peyton

Reputation: 3657

Try this:

CSS:

.d{border:1px solid #666; background: #fff; width:100px; height:50px; margin:60px;position:relative}
.d:before, .d:after{
    content: "";
    position:absolute;
    width: 0;
    height: 0;    
}
.d:before {
    top: -10px;
    right: -1px;
    border-bottom: 10px solid #666;
    border-left: 10px solid transparent;
}

.d:after {
    top: -8px;
    right: 0px;
    border-bottom: 10px solid #fff;
    border-left: 10px solid transparent;    
}

JSFiddle

I've tweaked the top/bottom left/right positioning for a more stable position, relative to the parent element. Also, I created the arrow in such a way that no rotation is necessary.

Upvotes: 3

Josh Crozier
Josh Crozier

Reputation: 241078

Change border-left: 10px solid #666 to border-left: 10px solid transparent.. and border-top: 0px solid transparent to border-top: 10px solid transparent.

To change shape of the triangle, set 0px on border-right or just remove it completely.

jsFiddle example 

.d:after {
    content: "\A";
    position:absolute;
    bottom: 50px;
    left: 90px;
    border-bottom: 10px solid #666; 
    border-left: 10px solid transparent;    
    border-top: 10px solid transparent;
}

Upvotes: 1

Olaf Dietsche
Olaf Dietsche

Reputation: 74078

You need to use the right border and the rest is just position 

.d:after {
    content: "";
    position:absolute;
    width: 0;
    height: 0;
    bottom: 40px;
    left:80px;
    border-left: 10px solid transparent;
    border-right: 10px solid #666;   
    border-bottom: 10px solid transparent;    
    border-top: 10px solid transparent;
}

See modified JSFiddle

Upvotes: 1

Related Questions