Looking for advice for how can I make this design possible
#1 In the first image there is a curved line coming from the ending of another section to the beginning of another section(Marked With a Red Arrow Sign). How can I implement this with HTML, CSS, and JS? Letter I will implement it by myself using react and tailwind CSS. You can suggest me some YouTube tutorials or give me a guide to get started.
#2 On the second image Icons are inside of a polygon and those polygon positioned in a way wich lool like honeycomb. Can you tell me how can I create thia layout with Html and css?
9 Replies
Jesús Castro
CodePen
Responsive Honeycomb Layout
Honeycomb-like layout based on flexbox, the cells are shaped through clip-path. In order to make it work as a CSS-only solution the responsiveness is ...
Here a really good article about building a hexagon grid with css grid. really well explained
https://ninjarockstar.dev/css-hex-grids
the lines are not so straight forward. there's not really one way to do it. and it all depends on what your layout looks like and what specific end result you want. probably a lot of calcs, elements and positioning. maybe with svg
Building a hexagonal grid using CSS grid
CSS grid goes hexagonal.
and the curved line ig , u need svg for that
reminds me of da meme 😂
Hello
do u know how thath line in first photo created?
is it svg or it make with border
i think they are borders (2 elements) because it sizes and shapes relative to the previous and next element. It would be hard to do with svg, but you still need a lot of calcs
Could be border and the content container was just overlapping the line