CSS triangle border

Question

I am trying to create a tag shape with CSS. With following code, I can display the tag correctly with the arrow on the left side, How can I move the arrow to the right side of the div instead of the left?

HTML:

<div class="tags">
    <a href="#">tag</a>
</div>

CSS:

.tags a{
    float:left;
    height:24px;
    line-height:24px;
    position:relative;
    font-size:11px;     
    margin-left:20px;
    padding:0 10px 0 12px;
    background:#0089e0;
    color:#fff;
    text-decoration:none;
} 

.tags a:before{
    content:"";
    float:left;
    position:absolute;
    top:0;
    left:-12px;
    width:0;
    height:0;
    border-color:transparent #0089e0 transparent transparent;
    border-style:solid;
    border-width:12px 12px 12px 0;      
}

Demo: http://jsfiddle.net/TXLBT/

George · Accepted Answer · 2013-02-27 10:50:42Z

5

Just by changing a few CSS styles:

.tags a:after{
    content:"";
    float:left;
    position:absolute;
    top:0;
    right:-12px; //Change here
    width:0;
    height:0;
    border-color:transparent transparent transparent #0089e0; //Change here
    border-style:solid;
    border-width:12px 0 12px 12px; //Change here
}

It's rather self-explanitory: It is now positioned from the right and right and left border attributes get swapped. (Except of course for border-style)

FYI: Floating an element will have no effect on it if it is positioned absolutely.

JSFiddle

answered Feb 27, 2013 at 10:50

George

36.8k9 gold badges70 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Barney · Accepted Answer · 2013-02-27 10:54:21Z

2

Forked your code here.

Essentially, you need to changes instances of left for right (whether it's ::before or ::after, and the float direction, are immaterial, since the pseudo-element is absolutely positioned). When doing this, bear in mind that border-color and border-style actually reference top, right, bottom and left, in that order.

So the properties you are changing are:

left:-12px;
border-color:transparent #0089e0 transparent transparent;
border-width:12px 12px 12px 0;

to

right:-12px;
border-color:transparent transparent transparent #0089e0;
border-width:12px 0 12px 12px;

answered Feb 27, 2013 at 10:54

Barney

16.5k5 gold badges66 silver badges80 bronze badges

Comments

Tetaxa · Accepted Answer · 2013-02-27 10:52:17Z

1

Position the :before to the right and set the border to be transparent at all sides except the left instead of the right.

answered Feb 27, 2013 at 10:52

Tetaxa

4,4031 gold badge21 silver badges25 bronze badges

Collectives™ on Stack Overflow

CSS triangle border

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related