Simon Project - CSS Design - Help Needed

I’m trying to build the Simon game, and challenged myself to build a shape similar to the one in the example. Outer circle, inner circle, and the space in between divided into 4.

  1. If u think this is completely unnecessary let me know.
  2. At the moment I’m using this CSS code: . I manage to create a small circle inside a bigger circle. Any idea how to divide the space into 4, similar to the example?

i haven’t gottent to this project yet but that’s what i would do:

  1. draw the #outer-circle (which is a squared div with border-radius right?)
  2. inside the #outer-circle draw 4 divs (each takes 1/4 of the #outer-circle) with colored backgrounds - green (top left), red (top right), yellow(bottom left), blue(bottom right) in your example;
  3. to each of 4 divs apply corner-cpecific border radius property - border-top-left-radius to green, border-top-right-radius to red etc;
  4. draw #inner-circle in the middle of your layout (with position: absolute;) on top of #outer-circle and 4 divs.

does it make sense?

Well, you could divide any square across the middle horizontally and vertically to form 4 smaller squares that each have half of its width and height. A halved perimeter = quartered area.

Like so


And circles in CSS are just squares with 50% border-radius on each vertex.

So you would have to define 4 squares with the appropriate border-radius on specific vertices such that when put together, they match the 50% border-radius of a single larger square/circle. Hint: it’s not 50%.


border-top-left-radius: ?

From there you just ‘stack’ the middle circle on top of the 4 modified squares.

I haven’t got to this yet either (first day today) but here’s a quick sketch.

there is almost certainly a better way to do this but maybe my hack attempt will help. I didn’t look at the code on the example project but i bet it’s done in a nice way there…

Thanks everyone!

@dylan, actually to my bare eyes, something seems not completely aligned in the given examples. Your solution seems great. I wonder if we can also add a 1px border to the inner div squares, so far I have failed to do so. Since the colors are unique to each div, I’d asign the color to the div with an id, not a class.

Hey @carpben I think maybe the way I would do it would be to use two divs to make cross and then place them underneath the inner circle. Adding borders could start getting tricky as it affects the width of the element.

This is still not optimal and maybe even a little ugly because if you change the thickness you have to tweak positioning again. Thinking now a cleaner way might be to place the two .stripe divs into a container and then centre that on .outer-circle

You’re right, my classes for the inner divs are not right. I barely ever use id’s though. My linter yells at me and I almost never need them. Your suggestion is a good idea. Another approach could be to put each colour in it’s own class, so it can be used elsewhere and then use a seperate id for each corner property.

Your first solution was perfect. To add borders, all you have to do is add

   box-sizing: border-box;

to .corner

pro tip! much cleaner - nice one @jx2bandito

I was misunderstood.
In my original comment, when I said “actually to my bare eyes, something seems not completely aligned” I was not referring to your when I was not referring to your JS Fiddle example. I meant to say that your example was even better than the original :slight_smile: English is not my native language and hence the mistake.
Nice Job!

Here is my Simon project (Circle Version)

1 Like

Nice work @carpben!.

1 Like