用css制作折线

使用 CSS 制作折线

方法一：使用边框和旋转

通过组合边框和旋转变换创建折线效果。

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

.line {
  width: 100px;
  height: 2px;
  background-color: #000;
  position: relative;
}

.line::after {
  content: '';
  position: absolute;
  top: 0;
  left: 100%;
  width: 100px;
  height: 2px;
  background-color: #000;
  transform: rotate(45deg);
  transform-origin: left;
}

方法二：使用伪元素和边框

利用伪元素的边框特性绘制折线。

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

.zigzag-line {
  position: relative;
  height: 30px;
  width: 200px;
}

.zigzag-line::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    #000 25%,
    transparent 25%
  ) -25px 0,
  linear-gradient(
    225deg,
    #000 25%,
    transparent 25%
  ) -25px 0;
  background-size: 50px 50px;
}

方法三：使用 SVG 内联

虽然严格来说是 SVG，但可以嵌入到 HTML/CSS 中。

<div class="svg-line">
  <svg width="200" height="100" viewBox="0 0 200 100">
    <polyline points="0,50 50,20 100,80 150,30 200,50" 
              fill="none" 
              stroke="#000" 
              stroke-width="2"/>
  </svg>
</div>

方法四：使用 CSS 渐变

通过线性渐变模拟折线效果。

.gradient-line {
  width: 200px;
  height: 2px;
  background: linear-gradient(
    to right,
    #000 0%, #000 25%,
    transparent 25%, transparent 50%,
    #000 50%, #000 75%,
    transparent 75%, transparent 100%
  );
}

注意事项

• 方法一和方法二适合简单的折线效果
• 复杂路径建议使用 SVG（方法三）
• 渐变方法（方法四）适合特定风格的虚线型折线
• 调整旋转角度或渐变百分比可改变折线形状

以上方法均可通过调整 CSS 参数实现不同角度和样式的折线效果。