How do I make CSS arrow the same width as the container?

Question

I currently have arrows below the containers as shown in this fiddle: 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;
}

I would like to have the arrows extend all the way from left to right so that they are equal to the width of the container like shown in the image below. The arrows must also be responsive. I couldn't work it out. How do I do this?

Answer 1

CSS linear-gradient is one way to do it, if you're only looking to support newer-ish browsers:

 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

Shorter code and you can see the smoothness of the triangle :)

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

Just tweak your code into this. Actually you got the idea of using the pseudo element border. However, you didn't specify a value for border-right and border-left width.

Hope it helps :)