请问这种样式怎么实现

ufogmiec
  • 18

image.png
麻烦大佬看一下,有个需求,格子有线段连着,主要是这个线段中间的格子个数是不定的,而且还可能有多个段。
大佬们能不能提示一下怎么实现这个需求?

回复
阅读 3.1k
6 个回答

https://codepen.io/pantao/pen...

还有一个问题,如果不增加一个 .end 类,现在还无法选择到 .range 结束的时候的那个元素, .item:not(.range) + .item.range 可以选择到开始。

<div class="scroll">
  <div class="items">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item range"></div>
    <div class="item range"></div>
    <div class="item range"></div>
    <div class="item range"></div>
    <div class="item"></div>
    <div class="item range"></div>
    <div class="item range"></div>
    <div class="item"></div>
    <div class="item range"></div>
    <div class="item range"></div>
    <div class="item"></div>
  </div>
</div>
html {
  font-size: 10px;
}

.scroll {
  width: 100%;
  overflow-x: auto;
}

.items {
  display: flex;
  flex-wrap: no-wrap;
}

.item {
  display: block;
  width: 1.6rem;
  height: 1.6rem;
  background-color: #f0f0f0;
  margin: .2rem .2rem 1rem;
  position: relative;
}

.item:not(.range) + .item.range {
  background-color: #aca;
}

.item:after {
  content: '';
  display: block;
  width: 2rem;
  height: .6rem;
  position: absolute;
  left: calc(.5rem - 1px);
  bottom: calc(-1rem + 1px);
  margin-left: -1px;
  background-color: #fff;
}

.item.range:after {
  content: '';
  display: block;
  width: 2rem;
  height: .6rem;
  border-bottom: 1px solid #aca;
  border-right: 1px solid #aca;
  position: absolute;
  left: calc(.5rem - 1px);
  bottom: calc(-1rem + 1px);
  margin-left: -1px;
  background-color: #fff;
}

.item.range + .item:not(.range):after {
  left: calc(-.9rem - 1px);
  width: 3rem;
  border-left: 1px solid #aca;
}

.item:not(.range) + .item.range:after {
  left: .5rem;
  border-left: 1px solid #aca;
}

.item:not(.range) + .item.range:after {
  left: .5rem;
  border-left: 1px solid #aca;
}

感觉css不太好实现,要我做,我把那个线段分成格子那么宽的图片,然后用js拼图片,类似,虽说有点笨,
┕ - --- ┙

纯css没有想到合适的方法,如果能用js赋值,只要知道格子数量,给伪类动态赋个宽度值,就容易实现了

本来是想推荐这个JS项目的,用的是 JS + SVG
不过采纳的那个答案的实现方案非常巧妙(我能找出来的唯一的弱点就是不能交叉和包含,但是想来这应该正是题主想要的效果)。

你知道吗?

宣传栏