Hexagon CSS

WHATAMINKA

/

POSTS

/

HEXAGON CSS

4  JUL  2016

ABOUT / SUPPORT / FB / DO NOT / BLOGGER / ALLPOSTS / 404

HEXAGON CSS

The css is created by csshexagon.com, but after giving a border on hexagon, the preview result is lying. The border is not in one-line. So, i've done to edit the css with some a simple animations. I hope can make a more great than this. Like the user at codepen.io. But i can't use Javascript at all that usually used. I'll keep trying and learning. Especially, to learn a Javascript.

/* The Larger one */

.hexagon {
position: absolute;
width: 168px;
height: 105.24px;
background-color: transparent;
margin: 61.62px 0;
border-left: solid 21px white;
border-right: solid 21px white;
animation-name:tangah;
animation-duration:0.8s;
animation-iteration-count: infinite;
animation-delay: 2s;
}

.hexagon:before, .hexagon:after {
content: "";
position: absolute;
z-index: 1;
width: 119.49px;
height: 119.49px;
-webkit-transform: scaleY(0.5774) rotate(-45deg);
-ms-transform: scaleY(0.5774) rotate(-45deg);
transform: scaleY(0.5774) rotate(-45deg);
background-color: inherit;
left: 9.7538px;
}

.hexagon:before {
top: -74.2462px;
border-top: solid 29.6985px white;
border-right: solid 29.6985px white;
}

.hexagon:after {
bottom: -74.2462px;
border-bottom: solid 29.6985px white;
border-left: solid 29.6985px white;
}

@keyframes tangah {
0% {background-color:#000}
50% {background-color:#fff;}
100% {background-color:#000}
}

/* The Smaller one */

.hexagonket1{
position: absolute;
width: 101px;
height: 68.06px;
background-color: transparent;
margin: 37.53px 0;
border-left: solid 15px white;
border-right: solid 15px white;
animation-name:ket1;
animation-duration:0.8s;
animation-iteration-count: infinite;
animation-delay: 4s;
}

.hexagonket1:before,
.hexagonket1:after {
content: "";
position: absolute;
z-index: 1;
width: 71.92px;
height: 71.92px;
-webkit-transform: scaleY(0.5774) rotate(-45deg);
-ms-transform: scaleY(0.5774) rotate(-45deg);
transform: scaleY(0.5774) rotate(-45deg);
background-color: inherit;
left: 4.0381px;
}

.hexagonket1:before {
top: -45.9619px;
border-top: solid 21.2132px white;
border-right: solid 21.2132px white;
}

.hexagonket1:after {
bottom: -45.9619px;
border-bottom: solid 21.2132px white;
border-left: solid 21.2132px white;
}

@keyframes ket1{
0% {background-color:#000}
50% {background-color:#fff}
100% {background-color:#000}
}