Как мне нарисовать серые полоски на границах секторов круга?
Ответы (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 может не подойти, если предполагается интерактивность с секторами.
