css一条线带箭头

/* 使用 CSS 创建一条带箭头的线 */

/* 定义一个容器 */
.line-with-arrow {
  position: relative;
  width: 200px;
  height: 5px;
  background-color: black;
}

/* 创建箭头 */
.line-with-arrow::after {
  content: '';
  position: absolute;
  top: -10px;
  right: 0;
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent transparent black;
}

解释说明：

1. .line-with-arrow: 这是一个容器，用来创建一条线。通过设置 width 和 height 来定义线的长度和粗细，并使用 background-color 设置线条的颜色。
2. .line-with-arrow::after: 使用伪元素 ::after 来创建箭头。通过 border 属性来生成三角形箭头，具体是通过设置不同的边框宽度和颜色来实现。这里箭头的方向是向右的，你可以调整 border-color 和 border-width 来改变箭头的大小和方向。

如果你需要箭头指向其他方向，可以调整 border-color 的值，例如：

• 箭头向上：border-color: black transparent transparent transparent;
• 箭头向下：border-color: transparent transparent black transparent;
• 箭头向左：border-color: transparent black transparent transparent;