你能用css画尺子吗

984 阅读1分钟

背景

最近在做低代码项目的时候遇到一个问题就是用户在绘制页面的时候很难确定达到了对应的大小,因此想到看能不能加个尺子来展示出大小。画个三角、圆已经不知道写了多少次了,但是尺子还是第一次画。

linear-gardient

  • 先来个容器
    <div class="rule"></div>
  • linear-gardient 画出线
        .rule {
            margin: 200px 200px;
            width: 400px;
            height: 80px;
            border: 1px solid blue;
            background:repeating-linear-gradient(90deg,red 2px, red 3px, transparent 3px, transparent 20px );  // 线性渐变90度 transparent 3px, transparent 20px 则是 3px - 20px 透明
            background-repeat: repeat-x;  //背景沿着水平重复
            background-size: 20px 40px;// 控制其背景高度为40px
        }

效果

  • 画短线也是同样的道理 加个背景 然后把背景大小设置小一点
      .rule {
            margin: 200px 200px;
            width: 400px;
            height: 80px;
            border: 1px solid blue;
            background:repeating-linear-gradient(90deg,red 2px, red 3px, transparent 3px, transparent 20px),repeating-linear-gradient(90deg,red 2px, red 3px, transparent 3px, transparent 10px);
            background-repeat: repeat-x;
            background-size: 20px 40px, 20px 20px;
        }

image.png

  • 最后加个数字,文字实现方法有很多,这里只是一个演示
    <div class="rule">
        <span>01</span>
    </div>
    
         .rule {
            margin: 200px 200px;
            width: 400px;
            height: 80px;
            border: 1px solid blue;
            background:repeating-linear-gradient(90deg,red 2px, red 3px, transparent 3px, transparent 20px),repeating-linear-gradient(90deg,red 2px, red 3px, transparent 3px, transparent 10px);
            background-repeat: repeat-x;
            background-size: 20px 40px, 20px 20px;
          
            font-size: 20px;
            letter-spacing: 5px; 
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
        }

效果

image.png

最后

这里只是在此做个简单演示,谢谢。