Колесо фортуны css

Question

Делаю колесо фортуны. Надо сделать его размером в 600x600px.И всего там должно быть 5 секций.

Именно с таким построением HTML:

<div class="component">

          <div class="option">
            <div class="row">
              <img src="/firstStageResources/banana.svg" alt="banana" />
            </div>
          </div>
          <div class="option">
            <div class="row">
              <img src="/firstStageResources/burger.svg" alt="Burger" />
            </div>
          </div>
          <div class="option">
            <div class="row">
              <img src="/firstStageResources/headphone-symbol.svg" alt="Headphones" />
            </div>
          </div>
          <div class="option">
            <div class="row">
              <img src="/firstStageResources/longboard.svg" alt="Longboard" />
            </div>
          </div>
          <div class="option">
            <div class="row">
              <img src="/firstStageResources/shirt.svg" alt="Shirt" />
            </div>
          </div>

</div>

Буду рад помощи! Цвета и всё остальное не важно, главное структура построения колеса.Крутиться не должно, просто колесо.

Answer 1

Остаётся только выставить нужный размер:

body { margin: 0; height: 100vh; background-color: rgba(255, 255, 255, 1); background-image: url("https://i.stack.imgur.com/m9NKc.png"), radial-gradient(#fff8, #000f); background-position: 0% 0%; background-repeat: no-repeat; background-size: auto; display: flex; justify-content: space-around; align-items: center; }
  
.component {
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 4px #000;
  /* Если адаптивность не нужна, 
    то можно установить фиксированные 
    размеры, для высоты и ширины:
    height: 600px; width: 600px; */
  height: 90vh; max-height: 90vw;
  width: 90vw; max-width: 90vh;
}

.option {
  position: absolute;
  height: 50%; width: 50%;
  transform-origin: 100% 100%; transform: rotate(0deg) skewy(18deg);
  box-shadow: 0 0 0 2px #000, inset 0 0 0 2px #000;
  cursor: pointer; background: #ffbf00;
  transition: 0.8s ease-out;
}
.option:nth-child(2) { transform: rotate(72deg) skewy(18deg); background: #ff5722;}
.option:nth-child(3) { transform: rotate(144deg) skewy(18deg); background: #ba68c8;}
.option:nth-child(4) { transform: rotate(216deg) skewy(18deg); background: #2196f3;}
.option:nth-child(5) { transform: rotate(288deg) skewy(18deg); background: #4caf50;}

.component:hover .option:not(:hover) {
  box-shadow: 0 0 0 0px #000, inset 0 0 0 0px #000;
  opacity:.5; filter: grayscale(75%);
  transition: 0.5s ease-in-out;
}
.option:hover {
  box-shadow: 0 0 0 0px #000, inset 0 0 0 4px #000;
  transition: 0.4s ease-in-out;
}

.option .row {
  margin: 30%;
  display: flex; justify-content: center; align-items: center;
  height: 60%; width: 60%;
  border-radius: 50%;
  font: bold 100%/1em sans-serif;
  transform: skewy(-18deg) rotate(0deg);
  color: black; background-image: radial-gradient(#fff8, #fff0 70%);
  transition: 0.4s ease-in-out;
}
.option:nth-child(2) .row { transform: skewy(-18deg) rotate(-72deg); }
.option:nth-child(3) .row { transform: skewy(-18deg) rotate(-144deg); }
.option:nth-child(4) .row { transform: skewy(-18deg) rotate(-216deg); }
.option:nth-child(5) .row { transform: skewy(-18deg) rotate(-288deg); }

.option:hover .row {
  color: white; background-image: radial-gradient(#0008, #fff0 70%);
}

.option img {
  height: 80%; transition: 0.3s ease-in-out;
}
.option:hover img {
  filter: drop-shadow(0 2px 2px #fff) drop-shadow(0 0 3px #fff) invert(100%);
}

<div class="component">

  <div class="option">
    <div class="row">
      <img src="https://img.icons8.com/ios/344/banana.png" alt="banana" />
    </div>
  </div>
  <div class="option">
    <div class="row">
      <img src="https://img.icons8.com/ios/344/hamburger.png" alt="Burger" />
    </div>
  </div>
  <div class="option">
    <div class="row">
      <img src="https://img.icons8.com/ios/344/headphones.png" alt="Headphones" />
    </div>
  </div>
  <div class="option">
    <div class="row">
      <img src="https://img.icons8.com/ios/344/skateboard.png" alt="Longboard" />
    </div>
  </div>
  <div class="option">
    <div class="row">
      <img src="https://img.icons8.com/ios/344/t-shirt--v1.png" alt="Shirt" />
    </div>
  </div>

</div>

Пусть не пугает количество кода - это только для эффектов. Если убрать всё, что связано с :hover, то код уменьшится на треть.

Answer 2

body {margin: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh;
background: url(https://i.imgur.com/qBFlV3j.jpg) center top; background-size: cover;}

.component {
  --g: 2px; /*Внутренние границы*/
  --s: 300px; /*А-ля радиус*/
  width: 600px; /*Ширина*/ height: 600px; /*Высота*/
  background: black; /*Цвет если нужны внутренние границы*/
  position: relative; display: inline-block; overflow: hidden;
  border-radius: 50%; margin: 10px 0;
}

.option {
  position: absolute; overflow: hidden;
  top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%;
  clip-path: polygon( calc(50% + var(--g)/2) 50%, calc(50% + var(--g)/2) 0%, 100% 0%, 100% calc(33.745% - var(--g)/2), 50% calc(50% - var(--g)/2));
}

.option:nth-child(1) {transform: rotate(72deg);}
.option:nth-child(2) {transform: rotate(144deg);}
.option:nth-child(3) {transform: rotate(-72deg);}
.option:nth-child(4) {transform: rotate(-144deg);}
.option:nth-child(5) {transform: rotate(0deg);}

.row {position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
.row img {width: 100%;}

<div class="component">

  <div class="option">
    <div class="row">
      <img src="https://i.imgur.com/7ug1fcd.jpg" alt="banana" />
    </div>
  </div>
  <div class="option">
    <div class="row">
      <img src="https://i.imgur.com/J9gwdrO.jpg" alt="Burger" />
    </div>
  </div>
  <div class="option">
    <div class="row">
      <img src="https://i.imgur.com/w8yyguK.jpg" alt="Headphones" />
    </div>
  </div>
  <div class="option">
    <div class="row">
      <img src="https://i.imgur.com/bmgLTxN.jpg" alt="Longboard" />
    </div>
  </div>
  <div class="option">
    <div class="row">
      <img src="https://i.imgur.com/2z47gzc.jpg" alt="Shirt" />
    </div>
  </div>

</div>

главное структура построения колеса

.component {
  --g: 2px; /*Внутренние границы*/
  --s: 300px; /*А-ля радиус*/
  width: 600px; /*Ширина*/
  height: 600px; /*Высота*/
  background: white; /*Цвет если нужны внутренние границы*/
  position: relative; display: inline-block; overflow: hidden; border-radius: 50%;
}

.option {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%;
  clip-path: polygon( calc(50% + var(--g)/2) 50%, calc(50% + var(--g)/2) 0%, 100% 0%, 100% calc(33.745% - var(--g)/2), 50% calc(50% - var(--g)/2));
  background: red;
}

.option:nth-child(1) {transform: rotate(72deg);}
.option:nth-child(2) {transform: rotate(144deg);}
.option:nth-child(3) {transform: rotate(-72deg);}
.option:nth-child(4) {transform: rotate(-144deg);}
.option:nth-child(5) {transform: rotate(0deg);}

<div class="component">

  <div class="option">
    <div class="row"></div>
  </div>
  <div class="option">
    <div class="row"></div>
  </div>
  <div class="option">
    <div class="row"></div>
  </div>
  <div class="option">
    <div class="row"></div>
  </div>
  <div class="option">
    <div class="row"></div>
  </div>

</div>

БЛОГ НА HUSL

Колесо фортуны css

Ответы (2 шт):