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

Home Forums CSS Struggling with CSS Hexagon tutorial

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #158579

    I am trying to make a small square thumb into a small hexagon. I have found a brilliant tutorial here: and I have spent quite a while trying to figure out the CSS I would need to make it work on the site I am building but have had no success.

    I am trying to make this
    look like this

    Could anyone spare some brain cells to help me.

    I am completely stuck. the site is here
    Many thanks



    That looks great. Thank you.

    If you have any tips on how to achieve what I want with that, they would be gratefully received.

    Specifically what CSS would I use for the thumbs on the site I am making.

    Fine if not, I will persevere.

    Thanks so very much.



    If you’ve never seen SASS before that can be a little daunting, but what he is using is just basic CSS stored as variables. SASS contains math functions too, so a lot of that is being done for him, whereas if you were to do it, you would need to calculate the values yourself. The @mixin part is obviously where all the work is being done.

    If you read through the code, try and get an understanding of what he is doing. Fork it and start messing around with the code to find out what does what. Pull it apart, break it and fix it again. You will learn a lot, and if you manage to convert it to just CSS then you will have done a damn fine job :)


    Thanks Alex.

    That is a very lovely reply.

    I will give it a good go!

    Hope you have a great day :)

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