CSS三角边境

我试图创建CSS标签形状。使用下面的代码，我可以用左侧的箭头正确显示标签，如何将箭头移动到div的右侧而不是左侧？CSS三角边境

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/

来源

2013-02-27 user1251698

仅仅通过改变一些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

来源

2013-02-27 10:50:42 George

位置：前右侧，设置边框为透明除左边，而不是右边四面八方。

来源

2013-02-27 10:52:17 Tetaxa

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;

来源

2013-02-27 10:54:21 Barney

CSS三角边境

回答

相关问题