CSS Hexagon made of triangles

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

Just messing around with trying to create a hexagon. I realized a hexagon can be made with 6 equilateral triangles, Each rotated 60 degrees around the center, so why not try to make one out of CSS border triangles?

Thumbnail
This awesome code was written by MattH22, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright MattH22 ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>CSS Hexagon made of triangles</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>


    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      html, body { 
  min-height: 100%; 
}
body {
  background: #92c7d6;
  background-image: -webkit-radial-gradient(top, circle cover, #97d0e1, #427388 80%);
  background-image: -moz-radial-gradient(top, circle cover, #97d0e1, #427388 80%);
  background-image: -o-radial-gradient(top, circle cover, #97d0e1, #427388 80%);
  background-image: radial-gradient(top, circle cover, #97d0e1, #427388 80%);
}

.hexagon {
  height: 260px;
  width: 300px;
  position: relative;
  margin: 0 auto;
  transform-origin: 0 0;
  transform: translateX(150px) rotate(30deg);
}
.hexagon .triangle {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 130px 75px 0;
  border-color: #19c transparent;
  transform-origin: 75px 133px;
}
.hexagon .triangle:nth-child(1) {
  transform: rotate(60deg);
}
.hexagon .triangle:nth-child(2) {
  transform: rotate(120deg);
}
.hexagon .triangle:nth-child(3) {
  transform: rotate(180deg);
}
.hexagon .triangle:nth-child(4) {
  transform: rotate(240deg);
}
.hexagon .triangle:nth-child(5) {
  transform: rotate(300deg);
}
.hexagon .triangle:nth-child(5), .hexagon .triangle:nth-child(6) {
  border-color: #6acdf3 transparent;
}
.hexagon .triangle:nth-child(2), .hexagon .triangle:nth-child(3) {
  border-color: #0d769d transparent;
}
.hexagon:hover

    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <div class="hexagon">
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/MattH22/css-hexagon-made-of-triangles-FfqgG */
html, body { 
  min-height: 100%; 
}
body {
  background: #92c7d6;
  background-image: -webkit-radial-gradient(top, circle cover, #97d0e1, #427388 80%);
  background-image: -moz-radial-gradient(top, circle cover, #97d0e1, #427388 80%);
  background-image: -o-radial-gradient(top, circle cover, #97d0e1, #427388 80%);
  background-image: radial-gradient(top, circle cover, #97d0e1, #427388 80%);
}

.hexagon {
  height: 260px;
  width: 300px;
  position: relative;
  margin: 0 auto;
  transform-origin: 0 0;
  transform: translateX(150px) rotate(30deg);
}
.hexagon .triangle {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 130px 75px 0;
  border-color: #19c transparent;
  transform-origin: 75px 133px;
}
.hexagon .triangle:nth-child(1) {
  transform: rotate(60deg);
}
.hexagon .triangle:nth-child(2) {
  transform: rotate(120deg);
}
.hexagon .triangle:nth-child(3) {
  transform: rotate(180deg);
}
.hexagon .triangle:nth-child(4) {
  transform: rotate(240deg);
}
.hexagon .triangle:nth-child(5) {
  transform: rotate(300deg);
}
.hexagon .triangle:nth-child(5), .hexagon .triangle:nth-child(6) {
  border-color: #6acdf3 transparent;
}
.hexagon .triangle:nth-child(2), .hexagon .triangle:nth-child(3) {
  border-color: #0d769d transparent;
}
.hexagon:hover

Comments