创建一个以除最后一个列表项以外的所有项为中心的三角形

Question

我想在每个

li

元素但不是最后一个元素的中心下方创建一个三角形。

这是代码笔 https://codepen.io/WiseConnAaron/pen/RwewxwP

我尝试在 css 中使用

::after

伪元素，但没有结果。不确定这是否是我应该走的路线。自从我不得不做任何 CSS 以来已经 7 年了，所以给我一些 slack stack :)

也开始了一家新公司，而不是使用我高度标记的主堆栈交换个人帐户。

Answer 1

您的

::after

选择器缺少

content

属性，这是显示伪元素所必需的。

.steps-ul li::after {
  content: " ";
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

从this question复制三角形代码。

至于最后一个元素不加三角形，可以使用

:not(:last-child)

选择器

Answer 2

这个第一个链接对你很有用

https://dev.to/codesandtags/how-to-create-a-triangle-in-css-hmh

其他链接对您也很有用。

https://stackoverflow.com/questions/25065661/how-to-position-a-css-triangle-using-
http://jsfiddle.net/amortka/t985yf4p/
https://stackoverflow.com/questions/7073484/how-do-css-triangles-work