CSS中实现两点之间的线,可以通过伪元素::before或::after加上一条border来实现,也可以使用CSS3新增的线性渐变功能。.line { position: relative; hei
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%,代表边框的水平半径和垂直半径相等,即一个圆形。这样就能形成一条圆弧形的曲线了。
粉丝
0
关注
0
收藏
0