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);
}
}
}
