How to fill the first square with a shadow trick?

Question

I experimented with some tricks box-shadow, I can’t fill the first square (0 0 [color]).

The following sample is best explained:

.box {
  width: 90px;
  position: relative;
  display: inline-block;
}
.box:before {
  content: '';
  width: 45px;
  height: 45px;
  position: absolute;
  z-index: 90;
  box-shadow: 0 0 #ffff00, 0 -45px #ffff00, -45px 0 #ffff00, 45px 0 #ff0000, 0 45px #3333ff, 45px 45px #00ff00;
}
.mark {
  font-size: 45px;
  width: 45px;
  text-align: center;
  position: absolute;
}

<div class="box">
  <span class="mark">?</span>
</div>

Run codeHide result

Answer 1

The first square (0,0) is actually the space occupied by the pseudo-element, so the only way to fill it box-shadowis to use the shadow inset, as in the fragment below.

Normal box-shadowcannot be used, because regular shadows are always outside :)

.box {
  width: 90px;
  position: relative;
  display: inline-block;
}
.box:before {
  content: '';
  width: 45px;
  height: 45px;
  position: absolute;
  z-index: 90;
  box-shadow: 0 -45px #ffff00, -45px 0 #ffff00, 45px 0 #ff0000, 0 45px #3333ff, 45px 45px #00ff00, inset 0 0 0 45px orange;
}
.mark {
  font-size: 45px;
  width: 45px;
  text-align: center;
  position: absolute;
}

<div class="box">
  <span class="mark">?</span>
</div>

Run codeHide result

---

Another simpler way would be to add background-colorto the pseudo-element.

.box {
  width: 90px;
  position: relative;
  display: inline-block;
}
.box:before {
  content: '';
  width: 45px;
  height: 45px;
  background-color: orange;
  position: absolute;
  z-index: 90;
  box-shadow: 0 -45px #ffff00, -45px 0 #ffff00, 45px 0 #ff0000, 0 45px #3333ff, 45px 45px #00ff00;
}
.mark {
  font-size: 45px;
  width: 45px;
  text-align: center;
  position: absolute;
}

<div class="box">
  <span class="mark">?</span>
</div>

Run codeHide result

Answer 2

.box: before . z-index -1, .

.box:before {
    content: '';
    width: 45px;
    height: 45px;
    position: absolute;
    z-index: -1;
    background-color: #FF0;
    box-shadow: 0 0, 0 0, 0 0, 45px 0 #F00, 0 45px #3FF, 45px 45px #0F0;
}