Question

问题：

在覆盖它们时，我不应该看到其他任何底层div（与覆盖它们的div大小相同）。

.gauge-wrapper {
    position:relative;
    margin:20px;
    background-color: black;
}
.gauge-arc {
    position:absolute;
    top:0;
    left:0;
    width:100px;
    height:100px;
    border-radius:100%;
    border:7px solid;
}
.gauge-arc1 {
    border-color:red transparent transparent transparent;
    transform: rotate(200deg);
}
.gauge-arc2 {
  border-color:red transparent transparent transparent;
  transform: rotate(180deg);
}
.gauge-arc3 {
    border-color:red transparent transparent transparent;
    transform: rotate(180deg);
}
.gauge-mask {
    border-color: transparent transparent white transparent;
    z-index:9999
}
.gauge-background {
  border-color: #c3bdbd;
  z-index: -1;
}

<div class="gauge-wrapper">
    <div class="gauge-arc gauge-arc1"></div>
    <div class="gauge-arc gauge-arc2"></div>
    <div class="gauge-arc gauge-arc3"></div>
    <div class="gauge-arc gauge-mask"></div>
    <div class="gauge-arc gauge-background"></div>
</div>

我尝试过的事情：

扩展重叠div的边框宽度
更改边框颜色
仅更改底部边框宽度

应该是什么样子

顶部div周围不应有轮廓。我愿意接受勉强能解决问题的奇怪解决方案。如果您能找到一种简单的方法来做我正在做的事情，那很好，但我仍然想知道如何使用HTML / CSS解决这个特定问题。

Answer 1

如果使用框大小调整，则可以将蒙版放大2像素，然后将其边框加厚2像素，这样就可以覆盖下面的弧线：

* {
  box-sizing: border-box;  /* makes squares same size no matter padding and border */
}

.gauge-wrapper {
  width: 102px;      /* give this width and height (optional) otherwise it will take no space as everything inside is positioned absolutely */
  height: 102px;
  position: relative;
  margin: 20px;
}

.gauge-arc {
  position: absolute;   
  top: 1px;           /* start these 1px inside so outer circle is "larger" and will cover */
  left: 1px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 7px solid;
}

.gauge-arc1 {
  border-color: red transparent transparent transparent;
  transform: rotate(200deg);
}

.gauge-arc2 {
  border-color: red transparent transparent transparent;
  transform: rotate(180deg);
}

.gauge-arc3 {
  border-color: red transparent transparent transparent;
  transform: rotate(180deg);
}

.gauge-mask {
  top: 0;
  left: 0;
  width: 102px;
  height: 102px;
  border: 9px solid;
  border-color: transparent transparent white transparent;
  z-index: 9999
}

.gauge-background {
  border-color: #c3bdbd;
  z-index: -1;
}

<div class="gauge-wrapper">
  <div class="gauge-arc gauge-arc1"></div>
  <div class="gauge-arc gauge-arc2"></div>
  <div class="gauge-arc gauge-arc3"></div>
  <div class="gauge-arc gauge-mask"></div>
  <div class="gauge-arc gauge-background"></div>
</div>

用相同大小的另一个div完全覆盖一个div

1 个答案: