Как создать «Квинтовый круг» в HTML/CSS/JS [дубликат] ⇐ CSS

[Anonymous]

Квинтовый круг
Я хочу создать кликабельный пятый круг с правильной границей и цветом фона, как на изображении выше, но не смог успешно создать его в HTML/CSS. Я ищу альтернативные решения/ошибки в своем подходе.
Мой подход следующий:
CircleOfFifts.css

Код: Выделить всё

.key-pair:nth-child(1) .major-container {
transform: rotate(0deg) translate(120px) rotate(0deg);
}

.key-pair:nth-child(1) .minor-container {
transform: rotate(0deg) translate(90px) rotate(0deg) translateY(-20px);
}

.key-pair:nth-child(2) .major-container {
transform: rotate(30deg) translate(120px) rotate(-30deg);
}

.key-pair:nth-child(2) .minor-container {
transform: rotate(30deg) translate(90px) rotate(-30deg) translateY(-20px);
}

.key-pair:nth-child(3) .major-container {
transform: rotate(60deg) translate(120px) rotate(-60deg);
}

.key-pair:nth-child(3) .minor-container {
transform: rotate(60deg) translate(90px) rotate(-60deg) translateY(-20px);
}

.key-pair:nth-child(4) .major-container {
transform: rotate(90deg) translate(120px) rotate(-90deg);
}

.key-pair:nth-child(4) .minor-container {
transform: rotate(90deg) translate(90px) rotate(-90deg) translateY(-20px);
}

.key-pair:nth-child(5) .major-container {
transform: rotate(120deg) translate(120px) rotate(-120deg);
}

.key-pair:nth-child(5) .minor-container {
transform: rotate(120deg) translate(90px) rotate(-120deg) translateY(-20px);
}

.key-pair:nth-child(6) .major-container {
transform: rotate(150deg) translate(120px) rotate(-150deg);
}

.key-pair:nth-child(6) .minor-container {
transform: rotate(150deg) translate(90px) rotate(-150deg) translateY(-20px);
}

.key-pair:nth-child(7) .major-container {
transform: rotate(180deg) translate(120px) rotate(-180deg);
}

.key-pair:nth-child(7) .minor-container {
transform: rotate(180deg) translate(90px) rotate(-180deg) translateY(-20px);
}

.key-pair:nth-child(8) .major-container {
transform: rotate(210deg) translate(120px) rotate(-210deg);
}

.key-pair:nth-child(8) .minor-container {
transform: rotate(210deg) translate(90px) rotate(-210deg) translateY(-20px);
}

.key-pair:nth-child(9) .major-container {
transform: rotate(240deg) translate(120px) rotate(-240deg);
}

.key-pair:nth-child(9) .minor-container {
transform: rotate(240deg) translate(90px) rotate(-240deg) translateY(-20px);
}

.key-pair:nth-child(10) .major-container {
transform: rotate(270deg) translate(120px) rotate(-270deg);
}

.key-pair:nth-child(10) .minor-container {
transform: rotate(270deg) translate(90px) rotate(-270deg) translateY(-20px);
}

.key-pair:nth-child(11) .major-container {
transform: rotate(300deg) translate(120px) rotate(-300deg);
}

.key-pair:nth-child(11) .minor-container {
transform: rotate(300deg) translate(90px) rotate(-300deg) translateY(-20px);
}

.key-pair:nth-child(12) .major-container {
transform: rotate(330deg) translate(120px) rotate(-330deg);
}

.key-pair:nth-child(12) .minor-container {
transform: rotate(330deg) translate(90px) rotate(-330deg) translateY(-20px);
}

CircleOfFifts.tsx — собственно компонент

Код: Выделить всё

import React, { useState } from "react";
import "./CircleOfFifths.css"; // Import CSS file for custom styles

const keys = [
{ major: "C", minor: "Am" },
{ major: "G", minor: "Em" },
{ major: "D", minor: "Bm" },
{ major: "A", minor: "F#m" },
{ major: "E", minor: "C#m" },
{ major: "B", minor: "G#m" },
{ major: "F#", minor: "D#m" },
{ major: "Db", minor: "Bbm" },
{ major: "Ab", minor: "Fm" },
{ major: "Eb", minor: "Cm" },
{ major: "Bb", minor: "Gm" },
{ major: "F", minor: "Dm" },
];

const CircleOfFifths = () => {
const [selectedKey, setSelectedKey] = useState("C");
const [expanded, setExpanded] = useState(false);

return (

 setExpanded(!expanded)}
style={{
backgroundColor: "#141429",
color: "#758599",
border: "1px solid rgba(0, 0, 0, 0.12)",
}}
>
{!expanded &&  {selectedKey}}
{expanded && (

{keys.map((key, index) => (

 {
setSelectedKey(key.major);
setExpanded(false);
}}
>
{key.major}

className="key-container minor-container"
onClick={() => {
setSelectedKey(key.minor);
setExpanded(false);
}}
>
{key.minor}


))}

)}


);
};

export default CircleOfFifths;

Этот метод правильно размещает буквы в круге, но я не могу правильно разместить рамку и подозреваю, что есть лучший подход. Заранее спасибо за помощь.

Подробнее здесь: https://stackoverflow.com/questions/786 ... tml-css-js