【CSS】如何使用css绘制一条斜虚线

益达是我

已于 2024-07-12 10:54:29 修改

阅读量116

点赞数 3

分类专栏： CSS 文章标签： css javascript 前端

于 2024-07-12 10:52:52 首次发布

本文链接：https://blog.csdn.net/qq_33489538/article/details/140373201

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

如何使用css绘制一条斜虚线

文章目录

如图
一、代码

如图

在这里插入图片描述

提示：以下是本篇文章正文内容，下面案例可供参考

一、代码

.percent-line {
  display: inline-block;
  height: 2px;
  width: 180px;
  position: relative;
  background: repeating-linear-gradient(135deg, #193D75, #193D75 4px, transparent 4px, transparent 8px);


  .line {
    position: absolute;
    top: 0;
    left: 0;
    background: repeating-linear-gradient(135deg, rgba(0, 224, 255, 1), rgba(0, 224, 255, 1) 4px, transparent 4px, transparent 8px);
    height: 2px;
    width: 100px;
  }
}