Vandigroup CSS logo

Pure CSS icon

by vandigroup

HTML

<div id="vicon">
    <div class="varrow varrow1">
        <div class="bar1"></div>
        <div class="bar2"></div>
        <div class="bar3"></div>
    </div>
    <div class="varrow varrow2">
        <div class="bar1"></div>
        <div class="bar2"></div>
        <div class="bar3"></div>
    </div>
    <div class="varrow varrow3">
        <div class="bar1"></div>
        <div class="bar2"></div>
        <div class="bar3"></div>
    </div>
    <div class="varrow varrow4">
        <div class="bar1"></div>
        <div class="bar2"></div>
        <div class="bar3"></div>
    </div>
</div>
<h1>VandiGroup</h1>

CSS

#vicon {width: 400px; height: 400px; margin: 30px auto; overflow: hidden;}
#vicon .varrow {display: inline-block;position: relative; width: 47%; height: 47%; margin: 1%; overflow: hidden;}

    .bar1, .bar2, .bar3 {position: absolute;top:0;left:0;background: #000;}
    .bar1, .bar3 {width:100%;height: 25%;}
    .bar2 {width:25%;height: 100%;}
    .bar3 {top:32%;left:-6%;
        -webkit-transform:rotate(45deg);
    }
    .varrow2 .bar1, .varrow2 .bar2, .varrow2 .bar3 {background: #0064a3;}

.varrow1 {-webkit-transform:rotate(180deg);}
.varrow2 {
    right: 0 !important;
    -webkit-transform:rotate(90deg);
}
.varrow3 {-webkit-transform:rotate(90deg);}

h1 {
    text-align:center;
    color: black;
    font: 7em/.7 "Open Sans", Arial, sans;
    font-weight: 800;
}