如何使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是一种方法，如果你只是想支持更新的浏览器：

2

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
}

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 width指定值。

希望有所帮助：）