html - CSS三 Angular 形边框

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 除外)

仅供引用:如果元素是绝对定位的，则 float 元素不会对其产生任何影响。

JSFiddle