We have a main element that holds a container which, in turn, holds the hexagons.
*/įont-size: 0 /* disable white space between inline block element */įont-size: initial /* we reset the font-size if we want to add some content */Ĭlip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%) The markup can go something like this: ĭisplay: flex /* we will talk about this later. Creating a hexagonal shape using clip-pathĮach hexagon is an inline-block element. Bennett Feely’s Clippy is a great online generator for clip paths. We will consider a variable S that will define the dimension of our element. This task is fairly easy using clip-path. Making a grid of hexagonsįirst, we create our hexagon shape. For example, we can chuck more hexagons in there by adding more divs, and control both the sizing and spacing using CSS variables.Ĭool, right? And this is only one example among many grids we will build in the same manner.
In addition to being responsive, the grid also scales. Resize the demo screen and see the magic. This is a fully responsive hexagon grid made without media queries, JavaScript, or a ton of hacky CSS.
0 kommentar(er)
