Как сделать 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>

Просто подстройте свой код. На самом деле у вас появилась идея использовать границу псевдоэлемента. Однако вы не указали значение ширины border-right и border-left.

Надеюсь, что это поможет :)