How to make this icon with pure CSS?

Navigation
3

Is it possible to do with CSS the icon of the image below?

Ifyes,howcanIdoit?

Itriedtodothis,butIcannotcreatethethirdpage,Icanonlydotwo:

.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 one, but I do not think it's feasible to create HTML elements in exception.

    
asked by anonymous 02.03.2017 / 13:45

2 answers

7

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>
    
02.03.2017 / 14:27
0

Using the example of Leon Freire, you can remove the element IDs and change the rules in 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;
}
    
03.03.2017 / 03:26
With making a count inside the array Capture TextBox that called the event