Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Designing Paragraphs along side hexagons

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #286434
    richie
    Participant

    I’m in need of some help. How would I be able to make a design like this? I am having difficulty understanding how the hexagons would be positioned in such a way.

    An image of the page can be viewed below [0].

    [0] https://drive.google.com/file/d/1ZdyANXuNDcuitKYH1QHqs_iA3a7-_vNK/view?usp=sharing

    #286445
    Paulie_D
    Member

    Doable but it would take positioning and clip-paths.

    It’s really a print layout more than a webpage layout.

    #286518
    deb
    Participant

    @richie

    If you know how to create hexagon from css then using media query, for bigger screen you can position them using position:absolute and when it goes to small screen you can remove hexagon and use just plain rectangle and position it relative.

    Thanks

    #286519
    uxfed
    Participant

    It’d be a lot easier if the images were provided in the hexagon shapes, then you could tinker with positioning/margins/transforms and the image would just be background-size: contain.

    Edit: Here’s a pen that uses a really clever transform method to get the hexagonal shape: https://codepen.io/web-tiki/pen/HhCyd

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.