Полностью накрыть один div с другим div того же размера - PullRequest
Новая
       10

Полностью накрыть один div с другим div того же размера

0 голосов
/ 10 декабря 2018

Проблема:

Я не должен видеть никаких других лежащих в основе 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
  • Изменение границыcolor
  • Изменение только ширины нижней границы

Как это должно выглядеть:

Не должно быть никаких контуров вокруг верхнего div.Я готов принять странные решения, которые едва решают проблему.Если вы можете найти более простой способ для меня делать то, что я делаю, отлично, но я все же хочу знать, как решить эту конкретную проблему с помощью HTML / CSS.

1 Ответ

0 голосов
/ 10 декабря 2018

Если вы используете размеры блока, вы можете увеличить маску на 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>
...