Круг на HTML и CSS

Question

Необходимо на HTML и CSS сверстать такой круг. Есть код сделанного, но с помощью его не получается нарисовать кружочек на выбранном и сделать корректную тень.

section {
    width: 12em;
    margin: auto;
}

.chart {
    position: relative;
    overflow: hidden;
    /* .triangle выходят за пределы */
}

.center {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    left: 36px;
    top: 36px;
    background-color: #FFF;
    z-index: 2;
}

.chart:before {
    content: "";
    display: block;
    padding-top: 100%;
}

.triangle {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 50%;
    transform-origin: center bottom;
    overflow: hidden;
}

.circle {
    height: 100%;
    width: 100%;
    background: silver;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    transform-origin: center bottom;
    transform: rotate(156.5deg);
}

<section class="chart">
   <div class="center"></div>
   <div class="triangle" style="transform:rotate(   0deg)">
      <div class="circle" style="background:#BD0204"></div>
   </div>
   <div class="triangle" style="transform:rotate( 22.5deg)">
      <div class="circle" style="background:#BD0204"></div>
   </div>
   <div class="triangle" style="transform:rotate(45deg)">
      <div class="circle" style="background:#FA3F3C"></div>
   </div>
   <div class="triangle" style="transform:rotate(67.5deg)">
      <div class="circle" style="background:#FFFC3E"></div>
   </div>
   <div class="triangle" style="transform:rotate(90deg)">
      <div class="circle" style="background:#BCBE00"></div>
   </div>
   <div class="triangle" style="transform:rotate(112.5deg)">
      <div class="circle" style="background:#02C103"></div>
   </div>
   <div class="triangle" style="transform:rotate(135deg)">
      <div class="circle" style="background:#44FA42"></div>
   </div>
   <div class="triangle" style="transform:rotate(157.5deg)">
      <div class="circle" style="background:#3AFEFF"></div>
   </div>
   <div class="triangle" style="transform:rotate(180deg)">
      <div class="circle" style="background:#02BCBD"></div>
   </div>
   <div class="triangle" style="transform:rotate(202.5deg)">
      <div class="circle" style="background:#0301BF"></div>
   </div>
   <div class="triangle" style="transform:rotate(225deg)">
      <div class="circle" style="background:#3D3FF9"></div>
   </div>
   <div class="triangle" style="transform:rotate(247.5deg)">
      <div class="circle" style="background:#FE40FD"></div>
   </div>
   <div class="triangle" style="transform:rotate(270deg)">
      <div class="circle" style="background:#BC02C0;"></div>
   </div>
   <div class="triangle" style="transform:rotate(292.5deg)">
      <div class="circle" style="background:#FFF"></div>
   </div>
   <div class="triangle" style="transform:rotate(315deg)">
      <div class="circle" style="background:#BDBCBF"></div>
   </div>
   <div class="triangle" style="transform:rotate(337.5deg)">
      <div class="circle" style="background:#3F3F3F"></div>
   </div>
   <div class="triangle" style="transform:rotate(360deg); z-index: 2">
      <div class="circle" style="background:#020202"></div>
   </div>
</section>

Answer 1

Не знаю, насколько важен именно такой дизайн... Заменил стрелку на вырез - с виду не сильно отличается, но размер кода сокращает прилично.

Только HTML и CSS (CSS-переменные, conic- и radial- градиенты, drop-shadow()):

let oRainbow = document.querySelector("div.rainbow");
let oMarker = document.querySelector("div.marker");
oRainbow.addEventListener("click", function(ev) {
  oMarker.style.setProperty("--deg", Math.floor(((180 / Math.PI) * Math.atan2(ev.offsetY - this.offsetHeight / 2, ev.offsetX - this.offsetWidth / 2)) / 22.5) * 22.5 + 90);
});

body { margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-image: radial-gradient(#faf, #000); overflow: hidden; }

.chart {
  position: relative;
  height: 12em; width: 12em;
}

.rainbow {
  height: 100%; width: 100%;
  border-radius: 50%;
  background-image: conic-gradient( #fff 0deg, #fff 22deg, #bdbcbf 22.5deg, #bdbcbf 44.5deg, #3f3f3f 45deg, #3f3f3f 67deg, #020202 67.5deg, #020202 89.5deg, #bd0204 90deg, #bd0204 112deg, #fa3f3c 112.5deg, #fa3f3c 134.5deg, #fffc3e 135deg, #fffc3e 157deg, #bcbe00 157.5deg, #bcbe00 179.5deg, #02c103 180deg, #02c103 202deg, #44fa42 202.5deg, #44fa42 224.5deg, #3afeff 225deg, #3afeff 247deg, #02bcbd 247.5deg, #02bcbd 269.5deg, #0301bf 270deg, #0301bf 292deg, #3d3ff9 292.5deg, #3d3ff9 314.5deg, #fe40fd 315deg, #fe40fd 337deg, #bc02c0 337.5deg, #bc02c0 360deg);
  box-shadow: inset 0 -2px 5px #000a;
}

.marker {
  --deg: 0;
  position: absolute;
  top: 50%; left: 50%;
  z-index: 1;
  height: 120px; width: 120px;
  border-radius: 50%;
  transform-origin: center;
  transform: translate(-50%,-50%) rotateZ(calc(var(--deg) * 1deg));
  background-image: conic-gradient( #fff0 0deg, #fff0 22deg, #fff 23deg);
  filter: drop-shadow(0 0px 3px rgba(0, 0, 0, 0.7));
  transition: .6s ease-in-out;
}
.marker::after {
  content: "";
  position: absolute;
  top: -35px; left: 57px;
  z-index: 1;
  height: 35px; width: 35px;
  border-radius: 50%;
  transform: rotateZ(calc(var(--deg) * -1deg));
  background-image: radial-gradient( circle, #fff 8px, #0000 10px, #0000 12px, #fff 14px, #fff 16px, transparent 17px);
  filter: drop-shadow(0 5px 2px rgba(0, 0, 0, 0.9));
  transition: .6s ease-in-out;
}

<section class="chart">
  <div class="rainbow"></div>
  <div class="marker"></div>
</section>

JS только для интерактива.

БЛОГ НА HUSL

Круг на HTML и CSS

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