How to make this icon with pure CSS?

Is it possible to make CSS the icon of the image below?

Page Icon

If yes, how can I do it?

I tried to do this, but I can not 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 for each page and apply a style for each, but I don't think it's feasible to create HTML elements except.

 3
cssicons
Author: Comunidade, 2017-03-02
Source

2 answers

How about that?

.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>
 7
Author: Leon Freire, 2017-03-02 19:43:17

Using the example of Leon Freire, you can remove the Ids of the elements and change the rules in the CSS to act on 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;
}
 0
Author: Vitor Adriano, 2017-03-03 02:26:18