work on progress....

index.html

<img src="http://iweb.uz/wp-content/uploads/2012/08/html5.png">

<div class="bg">
  <span>offline</span>
  <div class="offline"></div>  
</div>
<div class="bg">
  <span>storage</span>
  <div class="storage"></div>  
</div>
<div class="bg">
  <span>semantics</span>
  <div class="semantics"></div>  
</div>
<div class="bg">
  <span>audio/video</span>
  <div class="audiovideo"></div>  
</div>

style.css

body{
  background: #dddddd;
  width: 1000px;
  margin: 0 auto;
}

.bg{
  background: #ffffff;
  width: 90px;
  height: 90px;
  margin-left: 5px;
  display: inline;
  float: left;  
}

.bg:hover{
  transform: scale(1.2);
  box-shadow: 0 0 5px #777;
}

.bg span{
  color: #555;
	text-transform: uppercase;
  font-family: Arial, sans-serif;
  font-size: 12px;
  position: relative;
  padding: 20px 0 0 7px;
}

.offline{
  background: #ffffff;
	width: 28px;
  height: 28px;
  border: solid 5px;
  border-radius: 50%;
  position: relative;
  top: 10px;
  left: 25px;
}

.offline:before{
	background: #000000;
  content: "";
  width: 30px;
  height: 5px;
  position: absolute;
  top: 12px
}

.offline:after{
	background: #ffffff;
  content: "";
  width: 5px;
  height: 15px;
  border-left: solid 5px;
  border-right: solid 5px;
  position: absolute;
  top: 7px;
  left: 7px;
}

.storage{
  background: #ffffff;
	width: 28px;
  height: 28px;
  border: solid 5px;
  border-radius: 50%;
  position: relative;
  top: 10px;
  left: 25px;
}

.storage:before{
  background: #ffffff;
	content: "";
  width: 20px;
  height: 3px;
  border: solid 5px;
  position: absolute;
  left: 6px;
  top: 8px;
  border-radius: 8px 0 0 8px;
}

.semantics{
  background: #000;
  position: relative;
  top: 5px;
  left: 25px;
  
}

.semantics:before{
  background: #000;
  content: "";
  width: 15px;
  height: 8px;
  position: absolute;
  top: 10px;
  left: 3px;
  transform: skew(-38deg) rotate(-38deg);
  box-shadow: 
    0 13px 0 0 #000,
    0 25px 0 0 #000;
}

.semantics:after{
  background: #000;
  content: "";
  width: 15px;
  height: 8px;
  position: absolute;
  top: 10px;
  left: 22px;
  transform: skew(38deg) rotate(38deg);
  box-shadow: 
    0 13px 0 #000,
    0 25px 0 #000;
  -webkit-font-smoothing: antialiased;
}

.audiovideo{
  width: 25px;
  height: 17px;
  border-right: solid 5px;
  border-left: solid 5px;
  border-bottom: solid 5px;
  position: relative;
  top: 20px;
  left: 25px;
}

.audiovideo:before{
  background: #000;
  content: "";
	width: 5px;
  height: 5px;
  position: absolute;
  top: -5px;
  left: -4px;
  transform: skew(-20deg);
  box-shadow: 
    8px 0 0 #000,
    12px 0 0 #000,
    21px 0 0 #000,
    25px 0 0 #000;
}