帶有CSS的盒子之前和之後的箭頭

我試圖在一個盒子裏創建兩個箭頭，一個作爲指針，另一個作爲後面的盒子。帶有CSS的盒子之前和之後的箭頭

無法找到將箭頭置於後面的方法。

有人可以幫助我？

在這裏，我發佈與樣品的鏈接：http://jsfiddle.net/7Esu2/

CSS：

.arrow { 
    width:210px; 
    height:40px; 
    background-color:#CBCBCB; 
    border: 1px solid #CBCBCB; 
    position:relative; 
    text-align:center; 
    font-size:20px; 
    font-weight:bold; 
    line-height:40px; 
} 
.arrow:after { 
    content:''; 
    position:absolute; 
    top:-1px; 
    left:210px; 
    width:0; 
    height:0; 
    border:21px solid transparent; 
    border-left:15px solid #CBCBCB; 
} 
.arrow:before { 
    content:''; 
    position:absolute; 
    top:-1px; 
    left:211px; 
    width:0; 
    height:0; 
    border:21px solid transparent; 
    border-left:15px solid #CBCBCB; 
}

HTML：

<div class="arrow"> 
    FLECHA 
</div>

來源

2013-12-10 Apalabrados

你究竟想要達到什麼目的？你已經不得不在幾乎相同的位置上箭。也許只是將其中一個移動到其他地方:)？ –

我需要與箭頭相同形狀的盒子後面的空間。 – Apalabrados

像這樣http://jsfiddle.net/7Esu2/1/？ –

我更喜歡使用內聯塊在絕對定位。另外，：之前和之後：創建子元素（內部）後指定它們的元素（在開始和結束時）。對於這一點，它很可能是最好有一個包裝（或內部）塊，像這樣：

<div class="arrow"> 
    <div class="inner-arrow"> 
     FLECHA 
    </div> 
</div>

然後內部塊是會得到大多數的造型，如包裝主要有遏制：之前和之後。包裝（.arrow）需要有font-size：0（或其他一些方法來使內部塊周圍的空白空間，內部箭頭消失）。

.arrow { 
    font-size: 0; 
} 
.inner-arrow { 
    width:210px; 
    height:40px; 
    display: inline-block; 
    background-color:#CBCBCB; 
    text-align:center; 
    font-size:20px; 
    font-weight:bold; 
    line-height:40px; 
    vertical-align: middle; 
}

.arrow：before和.arrow：after的大部分樣式都是相同的，所以我們將它們分組。然後指定下面的差異（它們必須在下面以覆蓋常用樣式）。

.arrow:before, 
.arrow:after { 
    content:''; 
    display: inline-block; 
    width:0; 
    height:0; 
    border:20px solid transparent; 
    vertical-align: middle; 
} 
.arrow:before { 
    border-top-color: #CBCBCB; 
    border-bottom-color: #CBCBCB; 
    border-right-color: #CBCBCB; 
} 
.arrow:after { 
    border-left-color: #CBCBCB; 
}

這是全部在fiddle。

來源

2013-12-10 20:54:17 philwills

帶有CSS的盒子之前和之後的箭頭

回答

相關問題