+-----------------------------------------------+
| \ / \ / |
| \ GL / \ Bu / |
| \ / \ / |
| \ / Ch \ / |
| \ / \ / |
| x Lg x Ra |
| / \ / \ |
| / \ Md / \ |
| / \ / \ |
| / \ 1 / \ |
| / \ / \ |
| x AL |
| \ / \ / |
| \ / \ / |
| \ / \ / |
| \ / Gu \ / |
| \ / \ / Gk |
|Ke x Ma x SaR Sy |
| / \ / \ |
| / \ Sk / \ |
| / \ / \ |
| / \ / HL \ |
| / \ / \ |
+-----------------------------------------------+ KYA ISKA CODE MIL SAKTA HAI BLOGGER FRIENDLY HO
Hexagonal Grid
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.hex-grid {
display: grid;
gap: 10px;
grid-template-rows: repeat(6, auto);
}
.hex-row {
display: flex;
justify-content: center;
}
.hex {
width: 100px;
height: 100px;
background-color: #ADD8E6;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
font-size: 1.5rem;
color: #333;
}
.hex.lg {
background-color: #FFD700;
}
.hex.al {
background-color: #FF6347;
}
.hex.ke {
background-color: #98FB98;
}
.hex.hl {
background-color: #8A2BE2;
}
GL
Bu
Ch
Lg
Ra
Md
1
AL
Gu
Gk
Ke
Ma
Sy
SaR
Sk
HL
Comments
Post a Comment