How to make those hexagons and its background with css
I was watching a youtube short and i thought how to make those hexagons and its background image with css
https://www.youtube.com/shorts/IDYVZT3Jwzk?feature=share
Tony PowerPoint
YouTube
PowerPoint trick #presentationdesign
[email protected] (for commercial offers)
Instagram https://www.instagram.com/tonyppt_/
TikTok https://www.tiktok.com/@marketer.s_diary?lang=en
#presentation #powerpoint #ppt #powerpointtutorial
7 Replies
Did you come up with something?
no
maybe this page can help : 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!
but how to give all of those hexagons same image as background?
That's the easy part, create a common background with the image, then set the hexagon background to transparent and background-clip.
How to setup a hex grid of arbitrary number of rows and columns is the tricky part
do you have any idea on that?
I suppose grid is an esy but clunky way of doing it? But that css-tricks article seems very complete about that too