How to fill the first square with box-shadow trick?

Question

I was experimenting with some box-shadow tricks, I cannot fill the first square (0 0 [color]).

Best explained with followed sample:

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

Answer 1

The first square (0,0) is actually the space occupied by the pseudo-element and so the only way to fill it with a box-shadow is by using an inset shadow like in the below snippet.

A normal box-shadow cannot be used because, normal shadows are always on the 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>

---

The other more simpler way would be to add a background-color to 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>