纯CSS实现带有画布边框和刻度尺的样式

前提

有一个ui需求需要实现类似在线画布功能那种边框带刻度尺的效果。主要是上边框和左边框需要实现此UI效果。

效果如下

image

image

业务需求

除了上面的效果之外，还需要每个大刻度是需要点击选中的。并且选中还有单独的选中样式。

解决思路

1、第一种想法就是通过div实现，大刻度用边框来实现，里面的小刻度用10个标签来实现。

2、通过css的background-image属性种 linear-gradient 方法来实现。

3、第一种和第二种结合，外侧大标签用border来实现，里面的小刻度用background-image来实现。

实现方案

尝试过后可以完美实现刻度尺的样式。但是因为实际需求需要可以点击选中，而且选中后刻度颜色需要改变所以选中第三种方式来实现。

具体代码

数据结构

cemeteryData: [
    {
      name: 'B1',
      id: 'b1',
      active: false,
    },
    {
      name: 'B2',
      id: 'b2',
    },
]

HTML代码

<!-- 顶部刻度 -->
<div class="topScale">
  <div
    class="scaleItem"
    @click="topScale(list, index)"
    :class="list.active && 'scaleActive'"
    v-for="(list, index) in topScaleData"
    :key="list.id"
  >
    {{ index + 1 }}列
    <div class="scale"></div>
  </div>
</div>

CSS代码

.topScale {
  width: 100%;
  display: flex;

  .scaleItem {
    position: relative;
    flex: 1;
    height: 40px;
    text-align: center;
    cursor: pointer;
    border: 1px solid #83aef9;
    border-top: none;
    border-right: none;

    &:last-child {
      border-right: 1px solid #83aef9;
    }

    .scale {
      position: absolute;
      bottom: 0;
      left: 10%;
      width: 80%;
      height: 10px;
      background-image: linear-gradient(90deg, #83aef9 1px, transparent 0);
      background-size: 75px 0px, 11% 10px;
    }

    &.scaleActive {
      --active-color: #fddae2;
      background-color: var(--active-color);
      border-left-color: var(--active-color);
      border-bottom-color: var(--active-color);

      .scale {
        background-image: linear-gradient(90deg, var(--active-color) 1px, transparent 0);
      }

      &:last-child {
        border-right-color: var(--active-color);
      }

      + .scaleItem {
        border-left-color: var(--active-color);
      }
    }
  }
}

其中有两个地方需要注意，一个是 background-size: 75px 0px, 11% 10px; 设置横向的时候小刻度的间隔，10px是设置纵向的时候刻度的间隔。

还有个就是选中之后的样式，因为大标签的刻度是用的border来实现的。为防止边框重叠设置的右边框没有，只有最后一个元素的右边框才有。所以在选中的时候当前item的右边框是没有的，所以就需要将选中右侧item的左边框设置选中颜色。 通过 + .scaleItem来选中邻居class.

实现后的效果

image