Пончик Колесо | Нажмите, чтобы развернуть для получения подробной информации ⇐ CSS

[Anonymous]

Я пытаюсь создать кольцевое колесо, которое, когда пользователь нажимает на один из разделов, расширяется и показывает текстовое поле, описывающее эту конкретную позицию более подробно. Кольцевое колесо специально показывает ключевое слово процесса (это кольцевое колесо процесса), например «Регистрация компании», и когда клиент нажимает на часть колеса «Регистрация компании», этот раздел разворачивается и показывает более подробную информацию ( не более 150 символов), что включает в себя этот процесс.
Я не программист, но надеюсь, что в сообществе найдется кто-нибудь, кто сможет мне в этом помочь.
На данный момент у меня есть несколько концепций, которые я почерпнул у других людей. На сегодняшний день это то, что я получил на CodePen (нажмите здесь). Я не знаю, как получить функцию раскрытия при нажатии.

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

* {
box-sizing: border-box;
}

html {
font-family: Sans-Serif;
font-size: 16px;
}

.arrow-chart {
width: 350px;
height: 350px;
position: relative;
text-align: center;
border-radius: 100%;
overflow: hidden;
clip-path: circle(50% at 50% 50%);
/*   -ms-transform: scale(0.35, 0.35);
-webkit-transform: scale(0.35, 0.35);
transform: scale(0.35, 0.35); */
}

.arrow-chart:after {
content: "";
display: block;
background: #ffffff;
width: 50%;
height: 50%;
z-index: 10;
position: absolute;
border-radius: 100%;
top: 25%;
left: 25%;
/*   opacity: .8; */
/*   display: none; */
}

.arrow-chart section {
height: 48%;
width: 55%;
position: absolute;
text-align: center;
color: #cccccc;
background-color: currentColor;
display: flex;
align-items: center;
justify-content: center;
-webkit-clip-path: polygon( 75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
}

.arrow-chart section label {
font-size: 0.7rem;
font-weight: bold;
position: relative;
width: 50%;
padding: 0 5%;
margin: 25% 0 0 0;
display: block;
color: #ffffff;
}

.arrow-chart section:nth-child(1) {
transform: rotate(0);
margin-left: 44%;
margin-top: -12%;
}

.arrow-chart section:nth-child(1) label {
transform: rotate(0);
}

.arrow-chart section:nth-child(2) {
/*   display: none; */
transform: rotate(60deg);
margin-left: 66%;
margin-top: 26%;
}

.arrow-chart section:nth-child(2) label {
transform: rotate(-60deg);
}

.arrow-chart section:nth-child(3) {
/*   display: none; */
transform: rotate(120deg);
margin-left: 44%;
margin-top: 64%;
}

.arrow-chart section:nth-child(3) label {
transform: rotate(-120deg);
}

.arrow-chart section:nth-child(4) {
/*   display:none; */
transform: rotate(180deg);
margin-left: 0.25%;
margin-top: 64%;
}

.arrow-chart section:nth-child(4) label {
transform: rotate(-180deg);
}

.arrow-chart section:nth-child(5) {
/*   display:none; */
transform: rotate(240deg);
margin-left: -21.5%;
margin-top: 26%;
}

.arrow-chart section:nth-child(5) label {
transform: rotate(-240deg);
}

.arrow-chart section:nth-child(6) {
/*   display:none; */
transform: rotate(300deg);
margin-left: 0%;
margin-top: -12%;
}

.arrow-chart section:nth-child(6) label {
transform: rotate(-300deg);
}

figure ul {
list-style: none;
}

figure li:before {
content: "\2022";
display: inline-block;
width: 2rem;
margin-left: -1rem;
font-size: 5rem;
vertical-align: middle;
}

figure li {
height: 2rem;
}

figure li span {
color: #424242;
display: inline-block;
}

/* Color Palette from https://www.materialui.co/colors */

.high {
color: #686d6e !important;
}

.medium {
color: #9f2030 !important;
}

.low {
color: #010101 !important;
}

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

The goals


Regional criteria


Feasibility criteria


Form of operation


Risk management


The motive

Подробнее здесь: https://stackoverflow.com/questions/784 ... or-details