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>

Harry · Accepted Answer · 2015-12-31T17:24:42.997

5

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>

edited Dec 31 '15 at 17:24

answered Dec 31 '15 at 17:07

Harry

87,580
25
202
214

Aaah! yes! so if you use background-color: pink it is also okeay, but inset looks better! – Dec 31 '15 at 17:08
1

Lol you made an edit the same time i posted the simpel stuff! – Dec 31 '15 at 17:09
1

@PhilAndelhofs: Yep, `background-color` is one of the choices (and probably better when it comes to animations because `box-shadow` are super expensive). – Harry Dec 31 '15 at 17:10
Better dumb of me to ask this, but the inset solution was a nice way! – Dec 31 '15 at 17:11
@PhilAndelhofs: It's ok, don't beat yourself about it. Sometimes it happens when we keep looking at the code for long and forget some basic stuff. Happy New Year :) – Harry Dec 31 '15 at 17:12

score 0 · Answer 2 · answered Dec 31 '15 at 17:12

Set the background-color of the .box:before element to yellow and remove the yellow box shadow. Then set the z-index to -1 to render the question mark.

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

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

2 Answers2