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

Answer 2

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;

Answer 3

将前面的位置放在右边，并将边框设置为除了左边而不是右边的所有边都是透明的。

CSS三角边框

3 个答案: