Hexagon

In this example below you will see how to do a Hexagon with some HTML / CSS and Javascript

https://www.codesmite.com/article/how-to-create-pure-css-hexagonal-grids?ref=webdesignernews.com

Thumbnail
This awesome code was written by jmanhart, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright jmanhart ©
  • HTML
  • CSS
  • JavaScript
    <ul id="grid" class="clear">
        <li>
            <div class="hexagon"></div>
        </li>
        <li>
            <div class="hexagon"></div>
        </li>
        <li>
            <div class="hexagon"></div>
        </li>
        <li>
            <div class="hexagon"></div>
        </li>
        <li>
            <div class="hexagon"></div>
        </li>
        <li>
            <div class="hexagon"></div>
        </li>
        <li>
            <div class="hexagon"></div>
        </li>
        <li>
            <div class="hexagon"></div>
        </li>
        <li>
            <div class="hexagon"></div>
        </li>
        <li>
            <div class="hexagon"></div>
        </li>
        <li>
            <div class="hexagon"></div>
        </li>
        <li>
            <div class="hexagon"></div>
        </li>
	        <li>
            <div class="hexagon"></div>
        </li>
</ul>

/*Downloaded from https://www.codeseek.co/jmanhart/hexagon-oBGaKy */
    body {
    background: #282828;
}

#grid {
    position: relative;
    width: 60%;
    margin: 0 auto;
    padding: 0;
}

.clear:after {
    content: "";
    display: block;
    clear: both;
}

#grid li {
    list-style-type: none;
    position: relative;
    float: left;
    width: 27.85714285714286%;
    padding: 0 0 32.16760145166612% 0;
    -o-transform: rotate(-60deg) skewY(30deg);
    -moz-transform: rotate(-60deg) skewY(30deg);
    -webkit-transform: rotate(-60deg) skewY(30deg);
    -ms-transform: rotate(-60deg) skewY(30deg);
    transform: rotate(-60deg) skewY(30deg);
    overflow: hidden;
    visibility: hidden;
}

#grid li .hexagon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fdbf00;
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
}

#grid li * {
    visibility: visible;
}

#grid li:nth-child(2) {
  margin: 0 1%;
}

#grid li:nth-child(3n+2) {
  margin: 0 1%;
}

#grid li:nth-child(6n+4), #grid li:nth-child(6n+5), #grid li:nth-child(6n+6) {
    margin-top: -6.9285714285%;
    margin-bottom: -6.9285714285%;
    -o-transform: translateX(50%) rotate(-60deg) skewY(30deg);
    -moz-transform: translateX(50%) rotate(-60deg) skewY(30deg);
    -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
    -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
    transform: translateX(50%) rotate(-60deg) skewY(30deg);
}

#grid li:nth-child(6n+4) { 
    margin-left: 0.5%;
}


/*Downloaded from https://www.codeseek.co/jmanhart/hexagon-oBGaKy */
    

Comments