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

回答

相關問題