A CSS only hexagon pattern. No HTML is required, only multiple backgrounds.
Code structure
html {
--s:60px; /* shape size */
--m:2px; /* space */
--v1: green 119.5deg, transparent 120.5deg;
--v2: #fff 119.5deg, transparent 120.5deg;
background:
/* 6 */
conic-gradient(at var(--m) calc(var(--s)*0.5777), transparent 270deg, #fff 0deg),
conic-gradient(at calc(100% - var(--m)) calc(var(--s)*0.5777), #fff 90deg, transparent 0deg),
/* 5 */
conic-gradient(from -60deg at 50% calc(var(--s)*0.8662) , var(--v1)),
/* 4 */
conic-gradient(from -60deg at 50% calc(var(--s)*0.8662 + 2*var(--m)), var(--v2)),
/* 3 */
conic-gradient(from 120deg at 50% calc(var(--s)*1.4435 + 3*var(--m)), var(--v1)),
/* 2 */
conic-gradient(from 120deg at 50% calc(var(--s)*1.4435 + var(--m)), var(--v2)),
/* 1 */
linear-gradient(90deg, red calc(50% - var(--m)),#fff 0 calc(50% + var(--m)), red 0);
background-size: calc(var(--s) + 2*var(--m)) calc(var(--s)*1.732 + 3*var(--m));
}
An illustration to understand how the pattern is created by combining the different background layers:
That's it!
You can easily adjust the variables s and p to control the sizing and spacing. If you are wondering what is the logic behind the magic numbers here you go:
1.732 ~ (2 - sin(30deg))/cos(30deg)
1.4435 ~ 1.732 - tan(30deg)/2
0.8662 ~ 1.732/2
0.5777 ~ 0.8662 - tan(30deg)/2
In some cases, the result may be pixaleted and not perfect. Unfortunately, this a known drawback when dealing with gradients.
Discussion (0)