Как мне нарисовать серые полоски на границах секторов круга?

Нужны вот такие серые рамки на треугольниках, сам круг сделать автоматически через conic-gradient Круг который нужно сделать


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

Автор решения: UModeL

Бо́льшую часть оформления можно сделать используя лишь комбинацию градиентов:

/* For example only --> */ body { margin: 0; display: grid; place-items: center; min-height: 100vh; 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; }

ul {
  list-style-type: none;
  position: relative;
  padding: 0; margin: 0;
  width: 51.875em; height: 51.875em;
  border-radius: 50%;
  font: bold 1.8vh/1em sans-serif;
  background-image: 
    /* Точки */
    radial-gradient(circle at 50% 1.5625em, #fff 0 0.9375em, #fff0 1.0625em),
    radial-gradient(circle at 43.125em 8.75em, #fff 0 0.9375em, #fff0 1.0625em),
    radial-gradient(circle at 50.3125em 50%, #fff 0 0.9375em, #fff0 1.0625em),
    radial-gradient(circle at 43.125em 43.125em, #fff 0 0.9375em, #fff0 1.0625em),
    radial-gradient(circle at 50% 50.3125em, #fff 0 0.9375em, #fff0 1.0625em),
    radial-gradient(circle at 8.75em 43.125em, #fff 0 0.9375em, #fff0 1.0625em),
    radial-gradient(circle at 1.5625em 50%, #fff 0 0.9375em, #fff0 1.0625em),
    radial-gradient(circle at 8.75em 8.75em, #fff 0 0.9375em, #fff0 1.0625em),
    /* Окружности */
    radial-gradient(#ff0 0 1.25em, #000 1.3125em 3.4375em, #0000 3.5em 22.8125em, #664b00 22.875em 24.0625em, #d6ad5c 24.125em 25.9375em, #b800 25.9375em),
    /* Линии */
    linear-gradient(0deg, #ccc0 49.25%, #ccc 49.25% 50.75%, #ccc0 50.75%),
    linear-gradient(45deg, #ccc0 49.5%, #ccc 49.5% 50.5%, #ccc0 50.5%),
    linear-gradient(90deg, #ccc0 49.25%, #ccc 49.25% 50.75%, #ccc0 50.75%),
    linear-gradient(135deg, #ccc0 49.5%, #ccc 49.5% 50.5%, #ccc0 50.5%);
  perspective: 62.5em;
  transform-style: preserve-3d;
}

li {
  position: absolute;
  top: 50%; left: 50%;
  display: flex; align-items: center; justify-content: center;
  width: 10.27777778em; height: 8.52777778em;
  padding-left: 2.5em;
  box-sizing: border-box;
  font: bold 2.25em/1em sans-serif;
  text-align: center;
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
  transform-origin: 0 50%;
  transition: 0.2s ease-out;
}
li:nth-of-type(1) { transform: translate3d(0, -50%, -1px) rotate(22.5deg); }
li:nth-of-type(2) { transform: translate3d(0, -50%, -1px) rotate(67.5deg); }
li:nth-of-type(3) { transform: translate3d(0, -50%, -1px) rotate(112.5deg); }
li:nth-of-type(4) { transform: translate3d(0, -50%, -1px) rotate(157.5deg); }
li:nth-of-type(5) { transform: translate3d(0, -50%, -1px) rotate(202.5deg); }
li:nth-of-type(6) { transform: translate3d(0, -50%, -1px) rotate(247.5deg); }
li:nth-of-type(7) { transform: translate3d(0, -50%, -1px) rotate(292.5deg); }
li:nth-of-type(8) { transform: translate3d(0, -50%, -1px) rotate(337.5deg); }
li:nth-of-type(odd) { background-color: #fff; color: #000; }
li:nth-of-type(even) { background-color: #f00; color: #fff; }
ul:hover li:not(:hover) { opacity: 0.25; }
li:hover { cursor: pointer; }
<ul>
  <li>Гриль</li>
  <li>Тандыр</li>
  <li>Световая<br>фигура</li>
  <li>Костровая<br>чаша</li>
  <li>Кухонный<br>остров</li>
  <li>Уличный<br>шкаф</li>
  <li>Подвесное<br>кресло</li>
  <li>Качели</li>
</ul>

А вот conic-gradient может не подойти, если предполагается интерактивность с секторами.

→ Ссылка