1

我正在尝试使用 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/

4

3 回答 3

5

只需更改一些 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

于 2013-02-27T10:50:42.893 回答
2

在这里分叉你的代码。

本质上，您需要更改leftfor的实例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;
于 2013-02-27T10:54:21.923 回答
1

将 :before 定位到右侧，并将边框设置为除了左侧而不是右侧之外的所有边都是透明的。

于 2013-02-27T10:52:17.743 回答