Wie mache ich CSS Pfeil die gleiche Breite wie der Container?

Question

Ich habe derzeit Pfeile unter den Behältern, wie in dieser Geige gezeigt: 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; 
} 

Ich möchte die Pfeile von den ganzen Weg verlängern haben von links nach rechts, so dass sie der Breite des Behälters entsprechen, wie in der Abbildung unten gezeigt. Die Pfeile müssen auch ansprechen. Ich konnte es nicht schaffen. Wie mache ich das?

Answer 1

CSS linear-gradient ist eine Möglichkeit, es zu tun, wenn Sie nur suchen neuere-ish-Browser zu unterstützen:

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

Kürzere Code und Sie können sehen, die Glätte des Dreiecks :)

* { 
 
    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>

Ändern Sie einfach Ihren Code in diese. Sie haben tatsächlich die Idee, den Pseudo-Element-Rand zu verwenden. Sie haben jedoch keinen Wert für die Breite rechts und links angegeben.

Hoffe es hilft :)