- This topic is empty.
February 18, 2018 at 4:20 pm #267231
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!February 19, 2018 at 1:34 am #267240
Kinda like this:February 19, 2018 at 5:27 am #267245
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.February 19, 2018 at 1:37 pm #267252
Never mind. Didn’t realise you used JS. All is working now and I understand. Thank you!February 20, 2018 at 11:59 am #267306
How would I go about making the whole thing responsive so it scales to any device? I usually use Bootstrap.February 20, 2018 at 12:02 pm #267307
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.February 20, 2018 at 1:04 pm #267310
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.February 20, 2018 at 2:01 pm #267320
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.February 20, 2018 at 2:27 pm #267332
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.
- The forum ‘Design’ is closed to new topics and replies.