Fully cover one div with another div of the same size

Question

Problem:

I shouldn't be seeing any other the underlying divs (which are of the same size as the div covering them) when they're being covered.

.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>

What I've Tried:

Expanding the border width of the overlaying div
Changing the border color
Changing just the bottom border width

What It Should Look Like:

There should be no outline around the top div. I'm willing to accept odd solutions that barely fix the problem. If you can find an easier way for me to do what I'm doing, great, but I'll still want to know how to address this specific issue with HTML/CSS.

Not sure if I understand correctly. Do you want to hide the red outline around the bottom white part of the circle? Something like `.gauge-mask { transform: translateY(-2px); border-bottom-width: 11px; }`? https://jsfiddle.net/83gu0wtL/ Let me know if I misunderstood. — elveti, Dec 10 '18 at 14:46
Could this be related? https://stackoverflow.com/questions/19882283/pixelated-edge-around-a-css-circle-with-overflow-hidden — Persijn, Dec 10 '18 at 14:58

Pete · Accepted Answer · 2018-12-10T14:54:07.593

If you use box sizing you can make the mask 2px larger and in turn give it a 2px thicker border and that should cover your below arcs:

* {
  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>

I think it's just the way that browsers render curved edges - when you get to identical curved edges on top of each other, some browsers can't handle that and the bottom one will bleed through — Pete, Dec 10 '18 at 15:20

Fully cover one div with another div of the same size

1 Answers1