CSS треугольник границы

Question

Я пытаюсь создать форму тега с помощью CSS. С помощью следующего кода я могу правильно отобразить тег со стрелкой на левой стороне. Как перенести стрелку в правую сторону div вместо левой?

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

Демо: http://jsfiddle.net/TXLBT/

Answer 1

Просто изменив несколько стилей CSS:

.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 
} 

Это довольно самообучаемое: теперь оно расположено справа и справа, а левые атрибуты границы меняются местами. (За исключением, конечно, для border-style)

FYI: плавающий элемент не будет иметь никакого эффекта на него, если он будет установлен абсолютно.

JSFiddle

Answer 2

Установите: перед тем вправо и установить границы должны быть прозрачными со всех сторон, кроме левой, а не правой.

Answer 3

Forked your code here.

По существу, вы должны изменения экземпляров left для right (будь то ::before или ::after и float направления, несущественны, так как псевдо-элемент абсолютно позиционирован). При этом помните, что border-color и border-style фактически ссылаются сверху, справа, внизу и слева, в указанном порядке.

Таким образом, свойства которого меняются являются:

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

в

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