[分享]css两点之间的线

CSS中实现两点之间的线，可以通过伪元素::before或::after加上一条border来实现，也可以使用CSS3新增的线性渐变功能。

.line {
  position: relative;
  height: 2px; /*线的高度*/
  background-color: #000; /*线的颜色*/
}

.line::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%; /*线的长度*/
  border: 1px solid #000; /*边框形成线*/
  transform: translateY(-50%); /*使线居中*/
} 

代码中，我们先定义了一个.line类，设置了它的高度和背景色。然后使用伪元素::after在它的内部加上一条border，设置宽度为100%以撑满整个容器，使用transform将其上下居中。

如果要实现斜线或曲线，可以借助CSS3新增的线性渐变功能，设置线性渐变的起点和终点即可，代码如下：

.diagonal-line {
  position: relative;
  height: 150px; /*线的高度*/
  background-color: #f1f1f1; /*容器背景色*/
  background-image: linear-gradient(to bottom right, transparent 50%, #000 50%); /*设置线性渐变*/
}

.curve-line {
  position: relative;
  height: 100px; /*线的高度*/
  background-color: #f1f1f1; /*容器背景色*/
  background-image: linear-gradient(to bottom, transparent 50%, #000 50%); /*设置线性渐变*/
  border-radius: 50% / 100%; /*设置贝塞尔曲线*/
} 

以上代码中，我们分别定义了一个斜线类.diagonal-line和一个曲线类.curve-line。它们的实现方式是通过设置背景图片为线性渐变，其中to bottom right代表线性渐变的起点和终点方向为右下角，to bottom代表渐变方向垂直向下。在设置线性渐变时，使用了transparent（透明）和#000（黑色）作为颜色，50%的位置作为分界点，从而达到了绘制线条的效果。

对于曲线的绘制，我们使用border-radius属性设置贝塞尔曲线，值为50% / 100%，代表边框的水平半径和垂直半径相等，即一个圆形。这样就能形成一条圆弧形的曲线了。