Issue
I'm following this guide about creating a responsive hexagon pattern which staggers onto it self making it look cool. I have fully re-created the code and have played with it for over and hour and for the life of me cannot figure out how to centre the hexagons in 1st place, and 2nd I cannot figure out how to add extra hexagons so it looks like they're overflowing from the actual page.
I want to create a responsive background using this strategy and then use JS to generate the correct amount of (divs) required for the current visible screen while enabling a cool interaction with every single background hexagon on the screen.
What I want.
* {
margin: 0;
padding: 0;
}
.main {
display: flex;
--s: 100px;
--m: 4px;
--f: calc(var(--s) * 1.732 + 4 * var(--m) - 1px);
width: 100%;
height: 100vh;
background-color: purple;
}
.container {
font-size: 0;
}
.container div {
width: var(--s);
margin: var(--m);
height: calc(var(--s) * 1.1547);
display: inline-block;
font-size: initial;
clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
margin-bottom: calc(var(--m) - var(--s) * 0.2886);
background-color: red;
}
.container div:nth-child(even) {
background-color: green;
}
.container::before {
content: "";
width: calc(var(--s)/2 + var(--m));
float: left;
height: 100%;
shape-outside: repeating-linear-gradient(#0000 0 calc(var(--f) - 3px), #000 0 var(--f));
background-color: yellow;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hexagon Background</title>
<link rel="stylesheet" type="text/css" href="/main.css">
</head>
<body>
<div class="main">
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>Solution
Since you want it to behave as a background, use position: fixed with negative inset value to create the overflow:
body {
margin: 0;
}
.main {
position: fixed;
inset: calc(-1*var(--s));
display: flex;
--s: 100px;
--m: 4px;
--f: calc(var(--s) * 1.732 + 4 * var(--m) - 1px);
}
.container {
font-size: 0;
}
.container div {
width: var(--s);
margin: var(--m);
height: calc(var(--s) * 1.1547);
display: inline-block;
font-size: initial;
clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
margin-bottom: calc(var(--m) - var(--s) * 0.2886);
background-color: red;
}
.container div:nth-child(even) {
background-color: green;
}
.container::before {
content: "";
width: calc(var(--s)/2 + var(--m));
float: left;
height: 100%;
shape-outside: repeating-linear-gradient(#0000 0 calc(var(--f) - 3px), #000 0 var(--f));
background-color: yellow;
}<div class="main">
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>Answered By - Temani Afif
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.