How to make this icon with pure CSS?

Question

You can do the image icon with CSS below?

If yes, how can I?

I tried to do it like this, but I can’t create the third page, I can only do two:

.pages:before{
  content: "";
  width:25px;
  height:20px;
  background-color:#FF0004; /*vermelho*/
  position:absolute;
  z-index:3;
  top:0;
  left:0;
}
.pages{
  width:25px;
  height:20px;
  background-color:#F8FF00;
  z-index:2;
  position:absolute;
  top:4px;
  left:4px;
}
.pages:after{
  content: "";
  width:25px;
  height:20px;
  background-color:#2200FF; /*azul*/
  z-index:1;
  position:absolute;
  top:8px;
  left:8px;
}

<span class="pages"></span>

I know I could create 3 different spans one for each page and apply a style to each one, but I do not believe it is feasible to create HTML elements in exception.

Answer 1

How about this?

.relative {
  position: relative;
}

.block {
  width: 20px;
  height: 15px;
  background: black;
  border: 2px solid white;
  position: absolute;
}

#first {
  top: 10px;
  z-index: 10;
}

#second {
  top: 5px;
  left: 5px;
  z-index: 5;
}

#third {
  left: 10px;
  z-index: 1;
}

<div class="relative">
  <div id="first" class="block"></div>
  <div id="second" class="block"></div>
  <div id="third" class="block"></div>
</div>

Answer 2

Using the Leon Freire example, you can remove the Ids from the elements and change the rules in the CSS to act in the classes

.block:nth-child(1) {
  top: 10px;
  z-index: 3;
}
.block:nth-child(2) {
  top: 5px;
  left: 5px;
  z-index: 2;
}
.block:nth-child(3) {
  left: 10px;
  z-index: 1;
}