如何使用CSS为div实现反斜线（backslash）效果？

你可以利用CSS伪元素:before和:after给已有的红色线条添加两端装饰，不用额外新增HTML元素，具体实现如下：

HTML 结构 #

<div class="red-line"></div>

CSS 代码 #

/* 你的基础红色线条样式（可直接复用） */
.red-line {
  width: 60%;
  height: 3px;
  background-color: #ff3333;
  position: relative; /* 为伪元素定位提供基准 */
  margin: 30px auto; /* 居中显示，按需调整 */
}

/* 左侧装饰箭头 */
.red-line:before {
  content: "";
  position: absolute;
  left: -10px; /* 向左超出线条范围 */
  top: 50%;
  transform: translateY(-50%);
  /* 绘制向左的三角形箭头 */
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 8px solid #ff3333;
}

/* 右侧装饰箭头 */
.red-line:after {
  content: "";
  position: absolute;
  right: -10px; /* 向右超出线条范围 */
  top: 50%;
  transform: translateY(-50%);
  /* 绘制向右的三角形箭头 */
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid #ff3333;
}

按需调整说明 #

如果目标效果是两端带小方块而非箭头，可替换伪元素样式为：

.red-line:before, .red-line:after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background-color: #ff3333;
}
.red-line:before {
  left: -12px;
}
.red-line:after {
  right: -12px;
}

你可以通过修改颜色值、尺寸参数、偏移距离等，完全匹配你需要的视觉效果。

内容的提问来源于stack exchange，提问作者Kyobix