Forums

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

Home Forums Design Create 12 square boxes inside circle

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #267231
    HazJ
    Participant

    Hi all,
    I am looking for a way to create a 12 square boxes inside a circle. The square boxes would be positioned like on a clock. Can use pure CSS or CSS and JS/jQUery. Hopefully someone can point me in the right direction. I had created a basic prototype with SVG but it got messy as I was making them clickable where user would change the image inside. It was also a bit pointless as the user would upload .png/.jpg files. I am guessing I need to use transform with degrees but am a little unsure how to write it out in the CSS file. Any help would be greatly appreciated!

    #267240
    Paulie_D
    Member
    #267245
    HazJ
    Participant

    Thanks Paulie_D! How would I go about setting the size of the overall circle and then the square boxes inside? While keep it all aligned to the centre of the circle like a clock.

    #267252
    HazJ
    Participant

    Never mind. Didn’t realise you used JS. All is working now and I understand. Thank you!

    #267306
    HazJ
    Participant

    How would I go about making the whole thing responsive so it scales to any device? I usually use Bootstrap.

    #267307
    Paulie_D
    Member

    Swap out anything that in hard px numbers for % values.

    Bear in mind though that this has to be a circle so you’ll have to do some work to get the square first. Try looking into “maintain aspect ratio” for elements.

    Stack Overflow would be a good place to start.

    #267310
    HazJ
    Participant

    Okay. I did that but I still need a way to scale down the whole circle including the circles inside. The aspect ratio wouldn’t matter in this case I assume as it is 1:1. Correct me if I am mistaken or am missing something.

    #267320
    Paulie_D
    Member

    Yes, but you can’t set an aspect ratio of 1:1 using % because they’re using different starting points.

    % of window width vs % of window height. Unless your window is square…it ain’t gonna work.

    #267332
    HazJ
    Participant

    I am still a little confused. I have changed the hard px values to % or em for font-size like you said. What else do I need to do? Am I setting the window width / height with JS? I just need it to be responsive.

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