能否在:before伪元素中绘制线条/图形？求替代实现方案

当然可以在:before伪元素中实现线条或图形绘制，无需依赖canvas，以下是几种实用的实现方法：

1. 边框（Border）实现基础几何线条/形状 #

通过调整边框的宽度、颜色和组合方式，能快速实现简单的线条或三角形、梯形等形状：

/* 示例：绘制一条斜向的分隔线条 */
.target-element {
  position: relative; /* 作为伪元素的定位容器 */
  padding-left: 40px;
}

.target-element:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  /* 利用透明边框+有色边框组合出斜线 */
  border-top: 15px solid transparent;
  border-right: 25px solid #333;
  border-bottom: 15px solid transparent;
}

2. 背景渐变（Background Gradient）绘制灵活线条 #

渐变可以实现任意角度的直线、虚线甚至复杂的线条组合，适配大多数装饰性线条需求：

/* 示例：绘制一条45度角的纯色线条 */
.target-element:before {
  content: "";
  position: absolute;
  width: 80px;
  height: 2px;
  top: 50%;
  left: 10px;
  transform: translateY(-50%) rotate(45deg);
  background: #333;
  /* 若需要虚线效果，可改用渐变实现 */
  /* background: linear-gradient(to right, #333 50%, transparent 50%);
  background-size: 8px 2px; */
}

3. Clip-path创建自定义复杂图形/线条 #

通过裁剪伪元素的显示区域，能实现不规则线条或自定义形状：

/* 示例：绘制一个直角三角形线条 */
.target-element:before {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  top: 0;
  right: 0;
  background: #333;
  /* 多边形路径定义：左上、右下、左下 */
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

4. Box-shadow模拟多条分散线条 #

通过多层阴影的偏移和尺寸设置，可实现多条独立线条的效果：

/* 示例：绘制三条水平分散的短线条 */
.target-element:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  top: 20px;
  left: 10px;
  box-shadow: 
    0 0 0 2px #333,
    30px 0 0 2px #333,
    60px 0 0 2px #333;
}

注意事项 #

• 所有伪元素必须设置content: ""才能正常渲染；
• 伪元素通常搭配position: absolute定位，父元素需设置position: relative作为定位参考；
• 以上方案均兼容现代主流浏览器，可根据需求选择合适的实现方式。

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