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）

仅供参考：如果元素是绝对定位的，则浮动元素不会对其产生任何影响。

JSFiddle