css 列表右边的白三角

在网页制作中，经常能看到一种列表右边带有白色三角形的效果。这种效果可以使用 CSS 编写，只需要将列表项的样式调整一下即可。

li {
      position: relative;
      padding-left: 20px;
}
li:before {
      content: "";
      display: block;
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      width: 0;
      height: 0;
      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;
      border-right: 8px solid #ffffff;
}
    

上面的代码中，我们将 li 元素的 position 属性设置为 relative，使得其子元素的绝对定位可以相对于 li 元素进行定位。然后，我们设置 li 元素的 padding-left 属性，来给三角形留出空间。

接下来，我们使用伪元素 :before 在 li 元素之前插入一个空白元素，即白色三角形。使用 position 属性将其定位到 li 元素的左侧，上下居中使用 transform 属性实现，使用 border 属性设置它的大小和颜色。

这样，我们就成功地为列表添加了右侧的白色三角形，让样式更加美观。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！