[分享]css两个阶段点间划线

CSS中的两个阶段点间划线是一种常见的样式效果，可以用于美化网站上的分割线或连接线。接下来让我们来了解一下它的实现方式。 .line { bordertop: 1px dashed 000; : re...

CSS中的两个阶段点间划线是一种常见的样式效果，可以用于美化网站上的分割线或连接线。接下来让我们来了解一下它的实现方式。

 .line {
    border-top: 1px dashed #000;
    position: relative;
  }
  .line:before {
    content: "";
    position: absolute;
    top: -5px;
    left: -5px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid #000;
  }
  .line:after {
    content: "";
    position: absolute;
    top: -5px;
    right: -5px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #000;
  } 

以上代码中，我们首先用border-top属性设置了虚线的样式和颜色，接着通过:before和:after伪元素分别添加了两个三角形，实现了两端的倾斜效果，并且利用绝对定位和z-index指定了三角形的层级关系，使其位于虚线上面。

此外，还可以通过CSS变量进行优化，例如：

 :root {
    --line-color: #c2c2c2;
    --triangle-width: 12px;
    --triangle-height: 6px;
  }
  .line {
    border-top: 1px dashed var(--line-color);
    position: relative;
  }
  .line:before {
    content: "";
    position: absolute;
    top: calc(var(--triangle-height) * -1);
    left: 0;
    border-top: var(--triangle-height) solid transparent;
    border-bottom: var(--triangle-height) solid transparent;
    border-right: var(--triangle-width) solid var(--line-color);
  }
  .line:after {
    content: "";
    position: absolute;
    top: calc(var(--triangle-height) * -1);
    right: 0;
    border-top: var(--triangle-height) solid transparent;
    border-bottom: var(--triangle-height) solid transparent;
    border-left: var(--triangle-width) solid var(--line-color);
  } 

这样，我们就可以灵活地调整颜色、宽度和高度等样式属性，方便快捷地实现不同的效果。