在面前添加一個箭頭

我試圖給div添加一個箭頭形狀。我設法將它添加到div的結尾，但我很難找出如何將它添加到前面，而無需使用新的類。只有一個班級可以實現嗎？在面前添加一個箭頭

編輯：我回答這個問題有不同的形狀的方法，我覺得他們都是3非常有用：

.arrow { 
 
    margin-left: 100px; 
 
    position: relative; 
 
    background: pink; 
 
    width: 400px; 
 
    height: 100px; 
 
    text-align:center; 
 
    line-height:100px; 
 
    margin-bottom:10px; 
 
} 
 

 
.arrow:after { 
 
    border: solid transparent; 
 
    content: " "; 
 
    position: absolute; 
 
    border-bottom-color: white; 
 
    border-width: 50px; 
 
    left: 0; 
 
    top: 0; 
 
    transform: rotate(90deg); 
 
} 
 

 
.arrow:before { 
 
    border: solid transparent; 
 
    content: " "; 
 
    position: absolute; 
 
    border-bottom-color: pink; 
 
    border-width: 50px; 
 
    left: 400px; 
 
    top: 0; 
 
    transform: rotate(90deg); 
 
}

<div class="arrow"> 
 
    1 
 
</div> 
 
<div class="arrow"> 
 
    2 
 
</div>

來源

2016-12-14 HendrikEng

[在CSS的兩邊添加箭頭？]（http://stackoverflow.com/questions/18722059/adding-an-arrow-on-both-sides-of-a-div -using-css） – TylerH

@TylerH謝謝還沒有看到一個，它雖然有點不同，但我認爲內部div將是必要的比..我會嘗試適應它，並回答如果我成功。如果有人有更好的方式，請大聲喊出來。感謝球員 – HendrikEng

我已經修改了人字形，從這個頁面：https://css-tricks.com/examples/ShapesOfCSS/（借來的想法，學分張炳良蒂克納:)）

.chevron { 
 
    position: relative; 
 
    text-align: center; 
 
    height: 60px; 
 
    width: 260px; 
 
    line-height:60px; 
 
    
 
margin-bottom:10px; 
 

 
} 
 

 
.chevron:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 3%; 
 
    height: 50%; 
 
    width: 100%; 
 
    
 
    transform: skew(25deg, 0deg); 
 
    border:1px solid red; 
 
    border-bottom:none; 
 
} 
 

 
.chevron:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 3%; 
 
    height: 50%; 
 
    width: 100%; 
 
    
 
    transform: skew(-25deg, 0deg); 
 
     border:1px solid red; 
 
    border-top:none; 
 
}

<div class="chevron">1</div> 
 
<div class="chevron">2</div>

所以，一格和兩個僞元素，正確地畫出來，邊框隱藏在哪裏需要。

來源

2016-12-14 22:58:44 sinisake

您將需要一個內元件。這個元素是什麼，完全取決於你。在這裏我使用了<span>來顯示左箭頭。

.arrow { 
 
    float: left; 
 
    width: 128px; 
 
    height: 50px; 
 
    background-color: white; 
 
    border: 1px solid green; 
 
    position: relative; 
 
    margin-right: 40px; 
 
    text-align: center; 
 
    border-left: none; 
 
} 
 

 
.arrow:after,.arrow span:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 128px; 
 
    width: 0; 
 
    height: 0; 
 
    border: 25px solid transparent; 
 
    border-left: 12px solid white; 
 
    z-index: 2; 
 
} 
 

 
.arrow:before,.arrow span:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 129px; 
 
    width: 0; 
 
    height: 0; 
 
    border: 25px solid transparent; 
 
    border-left: 12px solid green; 
 
    z-index: 1; 
 
} 
 
.arrow span:after { 
 
    left: 0; 
 
} 
 

 
.arrow span:before { 
 
    left: 1px; 
 
}

<div class="arrow"><span></span>1</div> 
 
<div class="arrow"><span></span>2</div> 
 
<div class="arrow"><span></span>3</div> 
 
<div class="arrow"><span></span>4</div> 
 
<div class="arrow"><span></span>5</div>

來源

2016-12-14 22:33:34 junkfoodjunkie

啊這是有道理的，我設法得到類似的東西沒有內在的元素，但不知道它是否有意義:) http://codepen.io/HendrikEng/pen/bBQpKa – HendrikEng

這工作正常，但你不會能夠爲內部內容分配一個單獨的背景顏色，以及與該解決方案的邊界。 – junkfoodjunkie

啊，是的，非常感謝，這是真的 – HendrikEng

在面前添加一個箭頭

回答

相關問題