SCSS Hexagon Experiment

HTML
<div class="container"> <div class="hex item"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div>
SCSS
@function sqrt($r) { $x0: 1; $x1: $x0; @for $i from 1 through 10 { $x1: $x0 - ($x0 * $x0 - abs($r)) / (2 * $x0); $x0: $x1; } @return $x1; } $width: 256px; $height: $width / 2 * sqrt(3); html, body { height: 100%; } body { display: flex; justify-content: center; align-items: center; background: #333; } .container { position: relative; width: $width; height: $height * 2; transform: rotate(30deg); .item { position: absolute; top: 50%; left: 0; transform: translateY(-50%); } } .hex { width: $width; height: $height; color: blue; div { position: absolute; top: 0; left: 0; width: 50%; height: 50%; box-sizing: border-box; &:nth-child(1) { transform: translateX(50%); background: linear-gradient(to left, #FF5F6D , #FFC371); z-index: 1; } &:nth-child(2) { transform-origin: top left; transform: translateX(150%) rotate(60deg); background: #FF5F6D; } &:nth-child(3) { transform-origin: top right; transform: translateX(-50%) rotate(-60deg); background: linear-gradient(to left, #FF5F6D , #FFC371); z-index: 2; height: 100%; } &:nth-child(4) { transform: translate(50%, 100%); background: linear-gradient(to left, #FF5F6D , #FFC371); z-index: 1; } &:nth-child(5) { transform-origin: bottom left; transform: translate(150%, 100%) rotate(-60deg); background: linear-gradient(to left, #FF5F6D , #FFC371); } &:nth-child(6) { transform-origin: bottom right; transform: translate(-50%, 100%) rotate(60deg); background: linear-gradient(to left, #FF5F6D , #FFC371); } } }
JAVASCRIPT
Expand for more options Login