僞元素上的Css箭頭 - 動態適合父代的高度

Question

我有一個使用箭頭顯示的列表：after。它可以正常工作，但有時會在每個<li>內部動態添加多行文本 - 我如何能夠使箭頭伸展或只是沿着<li>的高度行進？

請參閱fiddle here。第一步有更多的文字，所以箭頭不再適合高度。

* { 
 
    box-sizing: border-box; 
 
} 
 

 
#step { 
 
    padding: 0; 
 
    list-style-type: none; 
 
    font-family: arial; 
 
    font-size: 12px; 
 
    clear: both; 
 
    line-height: 1em; 
 
    margin: 0; 
 
    text-align: center; 
 
    display:table; 
 
    width: 100%; 
 
} 
 

 
#step li { 
 
    float: left; 
 
    padding: 10px 30px 10px 40px; 
 
    background: #333; 
 
    color: #fff; 
 
    position: relative; 
 
    width: 30%; 
 
    margin: 0 10px; 
 
} 
 

 

 
#step li:after { 
 
    content: ''; 
 
    border-left: 16px solid #333; 
 
    border-top: 16px solid transparent; 
 
    border-bottom: 16px solid transparent; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 100%; 
 
    z-index: 20; 
 
}

<ul id="step"> 
 
    <li>Step 1<br/>Step 1</li> 
 
    <li>Step 2</li> 
 
    <li>Step 3</li> 
 
</ul>

是否有一個動態的解決這個問題？

在此先感謝。

Answer 1

我發現了一個有趣的解決方案here這似乎能夠處理動態高度 - 它使用線性漸變背景：

HTML：

<div class="box" style="font-size: 20px"> 
    css triangle/arrow grow when its parent div is resized 
</div> 

<div class="box" style="font-size: 25px;"> 
    css triangle/arrow grow when its parent div is resized 
</div> 

<div class="box" style="font-size: 40px;"> 
    css triangle/arrow grow when its parent div is resized 
</div> 

CSS：

.box { 
    width: 400px; 
    background-color: #307084; 
    color: #fff; 
    margin-bottom: 20px; 
    padding: 10px; 
    position: relative; 
} 
.box:before, .box:after { 
    width: 20px; 
    height: 50%; 
    position: absolute; 
    left: 100%; 
    content: ""; 
} 
.box:before { 
    top: 0px; 
    background: -webkit-linear-gradient(left bottom, #307084 50%, rgba(0, 0, 0, 0) 50%); 
    background: linear-gradient(to right top, #307084 50%, rgba(0, 0, 0, 0) 50%); 
} 
.box:after { 
    top: 50%; 
    background: -webkit-linear-gradient(left top, #307084 50%, rgba(0, 0, 0, 0) 50%); 
    background: linear-gradient(to right bottom, #307084 50%, rgba(0, 0, 0, 0) 50%); 
} 

Answer 2

拉伸箭頭 - 看起來不錯 - 只是居中箭頭：

加 - 頂部：50％;並添加邊距： - 16px的（箭頭的一半）

的偉大工程:)

#step li:after { 
    content: ''; 
    border-left: 16px solid #333; 
    border-top: 16px solid transparent; 
    border-bottom: 16px solid transparent; 
    position: absolute; 
    top: 50%; 
    left: 100%; 
    z-index: 20; 
    margin-top:-16px; 
} 

Answer 3

多一點的代碼，但動態的解決方案：

* { 
    box-sizing: border-box; 
} 

#step { 
    padding: 0; 
    list-style-type: none; 
    font-family: arial; 
    font-size: 12px; 
    clear: both; 
    line-height: 1em; 
    margin: 0; 
    text-align: center; 
    display: table; 
    width: 100%; 
} 

#step li { 
    float: left; 
    padding: 10px 30px 10px 40px; 
    background: #333; 
    color: #fff; 
    position: relative; 
    width: 30%; 
    margin: 0 10px; 
} 

li:before, 
li:after { 
    width: 16px; 
    height: 50%; 
    position: absolute; 
    left: 100%; 
    content: ''; 
} 

li:before { 
    top: 0px; 
    background: linear-gradient(to right top, #333 50%, transparent 50%) 
} 

li:after { 
    top: 50%; 
    background: linear-gradient(to right bottom, #333 50%, transparent 50%) 
} 

jsfiddle-link

Answer 4

你可以做這樣的事情與JS並與span代替:after

$(window).on("resize", function() { 
 
    $('li').each(function() { 
 
     var width = $(this).width(); 
 
     var height = $(this).outerHeight(); 
 
     $(this).children('span').css({ 
 
     'border-top': height/2+'px'+' solid transparent', 
 
     'border-left': height+'px'+' solid #333333', 
 
     'border-bottom': (height/2+1)+'px'+' solid transparent', 
 
     'right': '-'+(height-1)+'px' 
 
     }); 
 
    }); 
 
}).resize();

* { 
 
    box-sizing: border-box; 
 
} 
 

 
#step { 
 
    padding: 0; 
 
    list-style-type: none; 
 
    font-family: arial; 
 
    font-size: 12px; 
 
    clear: both; 
 
    line-height: 1em; 
 
    margin: 0; 
 
    text-align: center; 
 
    display:table; 
 
    width: 100%; 
 
} 
 

 
#step li { 
 
    float: left; 
 
    padding: 10px 30px 10px 40px; 
 
    background: #333; 
 
    color: #fff; 
 
    position: relative; 
 
    width: 20%; 
 
    margin: 0 30px; 
 
    box-sizing: border-box; 
 
} 
 

 
li span { 
 
    position: absolute; 
 
    height: 0; 
 
    width: 0; 
 
    top: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="step"> 
 
    <li>Step 1<br/>Step 1 <br>Step 1 <span></span></li> 
 
    <li>Step 2<br>Step 1 <span></span></li> 
 
    <li>Step 3 <span></span></li> 
 
</ul>