如何使CSS箭頭與容器的寬度相同？

Question

我目前擁有的集裝箱下面的箭頭所示，此琴：https://jsfiddle.net/xo9vwks1/

HTML：

<ul class="arrows"> 
<li><div>sadf sdfsdsdf</div></li> 
<li><div>sdsa sdss sdsd s </div></li> 
<li><div>sdfsdf sad assdssds s sdsdds sn</div></li> 
<li><div>sdsd sadfsdf asdf sadfon</div></li> 
<li><div>sdf sdfsdf sss ssdss ss s asd sa gsdsdf</div></li> 
</ul> 

CSS：

ul.arrows li { 
    background-color: #ddd !important; 
    display: block; 
    margin-bottom: 40px !important; 
    padding: 0 10px !important; 
    text-align: center; 
    list-style: none; 
    max-width: 400px; 
} 

ul.arrows li div::after { 
    border-color: #ddd transparent transparent; 
    border-style: solid; 
    border-width: 30px; 
    content: " "; 
    height: 0; 
    position: absolute; 
    right: 0; 
left: 50%; 
top: 100%; 
width: 0; 
z-index: 10; 
margin-left: -30px; 
} 

ul.arrows li:last-child div::after { 
border-width: 0; 
} 

ul.arrows li div { 
display: inline-block; 
line-height: normal; 
padding: 15px 0; 
position: relative; 
} 

我想有箭頭一路從延長從左到右，以便它們等於容器的寬度，如下圖所示。箭頭也必須有響應。我無法解決這個問題。我該怎麼做呢？

Answer 1

CSS linear-gradient是一個辦法做到這一點，如果你只是希望支持新十歲上下的瀏覽器：

ul.arrows li { 
 
    background-color: #ddd !important; 
 
    display: block; 
 
    margin-bottom: 40px !important; 
 
    text-align: center; 
 
    list-style: none; 
 
    max-width: 400px; 
 
} 
 

 
ul.arrows li div { 
 
    line-height: normal; 
 
    padding: 15px 10px; 
 
    position: relative; 
 
} 
 

 
ul.arrows li div::before { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 100%; 
 
    width: 50%; 
 
    height: 30px; 
 
    background: linear-gradient(to left bottom, #ddd 50%, rgba(0, 0, 0, 0) 50%); 
 
    content: " "; 
 
} 
 

 
ul.arrows li div::after { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 100%; 
 
    width: 50%; 
 
    height: 30px; 
 
    background: linear-gradient(to right bottom, #ddd 50%, rgba(0, 0, 0, 0) 50%); 
 
    content: " "; 
 
} 
 

 
ul.arrows li:last-child div::after, 
 
ul.arrows li:last-child div::before { 
 
    display: none 
 
}

<ul class="arrows"> 
 
    <li> 
 
    <div>sadf sdfsdsdf</div> 
 
    </li> 
 
    <li> 
 
    <div>sdsa sdss sdsd s </div> 
 
    </li> 
 
    <li> 
 
    <div>sdfsdf sad assdssds s sdsdds sn</div> 
 
    </li> 
 
    <li> 
 
    <div>sdsd sadfsdf asdf sadfon</div> 
 
    </li> 
 
    <li> 
 
    <div>sdf sdfsdf sss ssdss ss s asd sa gsdsdf</div> 
 
    </li> 
 
</ul>

Answer 2

短的代碼，你可以看到三角形的光滑度:)

* { 
 
    margin: 0; 
 
    padding: 0; } 
 
    
 
ul.arrows li { 
 
    background-color: #ddd !important; 
 
    display: block; 
 
    margin-bottom: 50px !important; 
 
    padding: 15px 0; 
 
    text-align: center; 
 
    list-style: none; 
 
    max-width:400px; 
 
    position: relative; } 
 

 
ul.arrows li:before { 
 
    position: absolute; 
 
    top: 48px; 
 
    left: 0; 
 
    content: ""; 
 
    border-right: 200px solid transparent; 
 
    border-left: 200px solid transparent; 
 
    border-top: 30px solid #ddd; }

<ul class="arrows"> 
 
    <li> 
 
    <div>sadf sdfsdsdf</div> 
 
    </li> 
 

 
    <li> 
 
    <div>sdsa sdss sdsd s </div> 
 
    </li> 
 
</ul>

只需調整你的代碼到這一點。其實你有使用僞元素邊界的想法。但是，您沒有爲邊界右側和左側邊界寬度指定值。

希望它有幫助:)