Home How do I fix a spinning wheel's selections stacking one on top of the other in css?

Questions

How do I fix a spinning wheel's selections stacking one on top of the other in css?

March 23, 2023

I’ve been trying to get this spinning wheel to work for a few days now, and I’m still having trouble! The CSS code is causing issues, the wheel should display eight equally spaced shapes, and have text on each shape. It does not.

Three of the possible outcomes or selections are in the proper areas, sized correctly, and have the right text, but after those three selections in the circle, it goes to the fourth of eight outcomes. The fourth is the right size, and shape, but five, six, seven, and eight are all stacked on top of four in different orientations and sizes. Also, the text on four, five, six, seven, and eight, only shows in certain spots, if at all.

@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=snap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #333;
}

.container {
  position: relative;
  width: 400px;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container .spinBtn {
  position: absolute;
  width: 60px;
  height: 60px;
  background: #fff;
  border-radius: 50%;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  font-weight: 600;
  color: #333;
  letter-spacing: 0.1em;
  border: 4px solid rgba(0, 0, 0, 0.75);
  cursor: pointer;
  user-select: none;
}

.container .spinBtn::before {
  content: '';
  position: absolute;
  top: -28px;
  width: 20px;
  height: 30px;
  background: #fff;
  clip-path: polygon(50% 0%, 15% 100%, 85% 100%);
}

.container .wheel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #333;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0 0 0 5px #333, 0 0 0 15px #fff, 0 0 0 18px #111;
}

.container .wheel .number {
  position: absolute;
  width: 50%;
  height: 50%;
  background: var(--clr);
  transform-origin: bottom right;
  transform: rotate(calc(45deg * var(--i)));
  clip-path: polygon(0 0, 56% 0, 100% 100%, 0 56%);
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  cursor: pointer;
}

<div class="container">
  <div class="spinBtn">Spin</div>
  <div class="wheel">
    <div class="number" style="--i:1;--clr:#db7093;"><span>Bite Release</span></div>
    <div class="number" style="--i:2;--clr:#20b2aa;"><span>Front Choke Release</span></div>
    <div class="number" style="--i:3;--clr:#d63e92;"><span>Stripping a Grab</span></div>
    <div class="number" style="--i:4;--clr:#daa520;"><span>Wrist Release</span>
      <div class="number" style="--i:5;--clr:#ff340f;"><span>Shoulder Check</span></div>
      <div class="number" style="--i:6;--clr:#ff7f50;"><span>Protective Shuffle</span></div>
      <div class="number" style="--i:7;--clr:#3cb371;"><span>Safety Stance</span></div>
      <div class="number" style="--i:8;--clr:#4169e1;"><span>Elbow Check</span></div>
    </div>
  </div>

I made a CodePen for it, you can view it here: CodePen.io

I should also mention I’m folowing a YouTube Tutorial, I’m at 7:36 when having problems. The link is here

>Solution :

You have the divs representing sections five, six, seven, and eight all inside the div representing section four. Once you move them out of it, it works. This is how the code in the body is supposed to look:

<body>
  <div class="container">
    <div class="spinBtn">Spin</div>
    <div class="wheel">
      <div class="number" style="--i:1;--clr:#db7093;"><span>Bite Release</span></div>
      <div class="number" style="--i:2;--clr:#20b2aa;"><span>Front Choke Release</span></div>
      <div class="number" style="--i:3;--clr:#d63e92;"><span>Stripping a Grab</span></div>
      <div class="number" style="--i:4;--clr:#daa520;"><span>Wrist Release</span></div>
      <div class="number" style="--i:5;--clr:#ff340f;"><span>Shoulder Check</span></div>
      <div class="number" style="--i:6;--clr:#ff7f50;"><span>Protective Shuffle</span></div>
      <div class="number" style="--i:7;--clr:#3cb371;"><span>Safety Stance</span></div>
      <div class="number" style="--i:8;--clr:#4169e1;"><span>Elbow Check</span></div>
    </div>
</body>