Keep text within a div with complex shape created with clipped path
Hi!
I'm looking at code examples to create a hex grid using CSS and want to achieve a hex grid that allows content of all types. The examples are all graphical or photo based, and when I play around with them trying to add text elements, it is clear that clipping paths don't actually define a hexagonal box but rather adjust the visuals to look and act hexagonal for visual purposes. However, I want a true hex shape that I can place text within that will allow automatically breaking and adjusting text to the hex shape. Has anyone had any experience with similar designs?
5 Replies
For reference here is one article that shows the kind of visual result I am after, albeit with missing functionality regarding text: https://css-tricks.com/hexagons-and-beyond-flexible-responsive-grid-patterns-sans-media-queries/
Temani Afif
CSS-Tricks
Hexagons and Beyond: Flexible, Responsive Grid Patterns, Sans Media...
A little while back, Chris shared this nice hexagonal grid. And true to its name, it’s using —wait for it — CSS Grid to form that layout. It’s a neat trick!
it seems like what you're looking for is something like an
element-shape property. The CSS Working Group has talked about this (and similar things like angled corners) but it's no where close to being a thing yet. Your best bet is making a background-image in the shape of a hexagon (probably with svg) and then use shape-outside for the text wrapping: https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outsideI did something related to this, but I use 0 width columns and some calculation for gap and transform
https://play.tailwindcss.com/17tT12wDnT?file=config
Tailwind Play
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
sorry tailwind
I think there's an article explaining my way, wait I try to find one
hmmm, no he's doing it differently but similar
https://frontend.horse/articles/thinking-outside-the-box-with-css-grid/
Thinking Outside the Box with CSS Grid - Frontend Horse
We look at amazing CSS grid experiments by Andy Barefoot