![]() We apply that offset to margin-bottom to get the following. That offset will be equal to 25% of the element height (see Figure 1). Toggling the font-size of the first demo to illustrate the white space issueĮvery other row needs some negative offset so the rows overlap rather than stack directly on top of each other. Since we are dealing with inline-block, we need to fight the common white space issue (using the font-size trick) and we consider some margin (defined with the variable M) to control the space. 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 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |