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

ここでコードをフォークしました。

left基本的に、 forのインスタンスを変更する必要があります（疑似要素は絶対的に配置されているため、それがまたはである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 に答える