tabs

<style>
body{
  background-color: #000;
}

  .tab1 {
 position: absolute;
 top: 50;
 left: 45;
 height: 20;
 width: 20;
 background-color: #fff;
 border-radius: 10px;
 transition: 0.3s ease-in;
 z-index: 5;
}

.tab1:hover {
 border-radius: 0px;
 transform: rotate(45deg);
}

.tab2 {
 position: absolute;
 top: 50;
 left: 95;
 height: 20;
 width: 20;
 background-color: #fff;
 border-radius: 10px;
 transition: 0.3s ease-in;
 z-index: 5;
}

.tab2:hover {
 border-radius: 0px;
 transform: rotate(45deg);
}

.tab3 {
 position: absolute;
 top: 50;
 left: 145;
 height: 20;
 width: 20;
 background-color: #fff;
 border-radius: 10px;
 transition: 0.3s ease-in;
 z-index: 5;
}

.tab3:hover {
 border-radius: 0px;
 transform: rotate(45deg);
}

.tab4 {
 position: absolute;
 top: 50;
 left: 0;
 height: 20;
 width: 20;
 background-color: #fff;
 border-radius: 10px;
 transition: 0.3s ease-in;
 z-index: 5;
}

.tab4:hover {
 border-radius: 0px;
 transform: rotate(45deg);
}

.tab5 {
 position: absolute;
 top: 50;
 left: 200;
 height: 20;
 width: 20;
 background-image:url('http://cliparts.co/cliparts/Rki/Myo/RkiMyoycj.png');
 background-size:100%;
 border-radius: 10px;
 transition: 0.3s ease-in;
 z-index: 5;
}

.tab5:hover {
 border-radius: 0px;
 transform: rotate(45deg);
}


</style>

bitch

<a class='tab1' href='#1'></a>
<a class='tab2' href='#2'></a>
<a class='tab3' href='#3'></a>
<a class='tab4' href='#4'></a>
<a class='tab5' href='#5'></a>


<div class='info' div id='3'>put</div>