Arranging divs in a circle

[JohnnySuriano]

Question:
I want to put four divs in a circle with slight margin in between them

I want it to look something like this but without the words in the middle

Repl link:
https://replit.com/@JohnnySuriano/Simon-Says#simon.css

.yellow {
  width: 100px;
  height: 100px;
  background-color: yellow;
  border-radius: 50% 0 0 0;
  display: inline-block;
  margin: 50px;
  transition: transform 0.5s ease-in-out;
}

.blue {
  width: 100px;
  height: 100px;
  background-color: blue;
  border-radius: 0 50% 0 0;
  display: inline-block;
  margin: 50px;
  transition: transform 0.5s ease-in-out;
}

.red {
  width: 100px;
  height: 100px;
  background-color: red;
  border-radius: 0 0 0 50%;
  display: inline-block;
  margin: 50px;
  transition: transform 0.5s ease-in-out;
}

.green {
  width: 100px;
  height: 100px;
  background-color: green;
  border-radius: 0 0 50% 0;
  display: inline-block;
  margin: 50px;
  transition: transform 0.5s ease-in-out;
}

[WindLother]

@JohnnySuriano

I want to put four divs in a circle with slight margin in between them

Create a container for the circle.

You can create two styles like .game-container and .gameColors in your CSS:

.game-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.gameColors {
    position: relative;
    width: 220px; /* for the margins */
    height: 220px;
}

and modify the style for colored divs:

.yellow, .blue, .red, .green {
    position: absolute;
    width: 100px;
    height: 100px;
    margin: 5px; /* for separation too */
    transition: transform 0.5s ease-in-out;
}

.yellow {
    top: 0;
    left: 0;
    border-radius: 50% 0 0 0;
    background-color: yellow;
}

.blue {
    top: 0;
    right: 0;
    border-radius: 0 50% 0 0;
    background-color: blue;
}

.red {
    bottom: 0;
    left: 0;
    border-radius: 0 0 0 50%;
    background-color: red;
}

.green {
    bottom: 0;
    right: 0;
    border-radius: 0 0 50% 0;
    background-color: green;
}

See if this helps