Расположите текст радиально в радиальном меню ⇐ CSS

[Anonymous]

У меня есть код радиального меню с элементами. У меня код работает, но я не понимаю, как добавить в него текст (подписи к пунктам меню). Я хочу, чтобы текст располагался радиально, желательно с некоторой кривизной. Однако все, что я нашел до сих пор, либо размещает текст по длине элементов метки, либо создает радиальный текст SVG, который не сегментирован (вращение текста по кругу). Ниже я прикрепил изображение того, как я хотел бы, чтобы это выглядело.
Как это выглядит сейчас:

Как я хочу, чтобы это выглядело:



Вот код:

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

#F {
transform: translate(0%, 2%);
}

#M1 {
opacity: 1;
visibility: visible;
transition: opacity 0.5s ease, visibility 0.5s ease;
}

#border {
transform: translate(0%, -2%);
}

body.no-scroll {
overflow: hidden;
}

.menu-open-button {
background: rgba(255, 255, 255, 0.65);
border-radius: 100%;
border: 1vh solid #9D9E99;
width: 10vh;
height: 10vh;
left: 50%;
top: 84vh;
position: fixed;
color: #FFFFFF;
text-align: center;
line-height: 80px;
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
-webkit-transition: -webkit-transform ease-out 200ms;
transition: -webkit-transform ease-out 200ms;
transition: transform ease-out 200ms;
transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
}

.menu-open-button:hover {
transition: 0.5s ease-in-out;
background: #379;
border: 1vh solid #FFFFFF;
}

.menu-open-button:hover .lines {
transition: 0.5s ease-in-out;
background: #fff;
}

.menu-open {
display: none;
}

.lines {
width: 5vh;
height: 0.7vh;
background: #9D9E99;
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-left: -2.4vh;
margin-top: -0.3vh;
-webkit-transition: -webkit-transform 200ms;
transition: -webkit-transform 200ms;
transition: transform 200ms;
transition: transform 200ms, -webkit-transform 200ms;
}

.line-1 {
-webkit-transform: translate3d(0, -1.7vh, 0);
transform: translate3d(0, -1.7vh, 0);
}

.line-2 {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

.line-3 {
-webkit-transform: translate3d(0, 1.7vh, 0);
transform: translate3d(0, 1.7vh, 0);
}

.menu-open:checked+.menu-open-button .line-1 {
-webkit-transform: translate3d(0, 0, 0) rotate(45deg);
transform: translate3d(0, 0, 0) rotate(45deg);
}

.menu-open:checked+.menu-open-button .line-2 {
-webkit-transform: translate3d(0, 0, 0) scale(0.1, 1);
transform: translate3d(0, 0, 0) scale(0.1, 1);
}

.menu-open:checked+.menu-open-button .line-3 {
-webkit-transform: translate3d(0, 0, 0) rotate(-45deg);
transform: translate3d(0, 0, 0) rotate(-45deg);
}

.menu-open-button {
z-index: 2;
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
-webkit-transition-duration: 400ms;
transition-duration: 400ms;
-webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
transform: scale(1.1, 1.1) translate3d(0, 0, 0);
cursor: pointer;
box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
}

.menu-open-button:hover {
-webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);
transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}

.menu-open:checked+.menu-open-button {
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-duration: 200ms;
transition-duration: 200ms;
-webkit-transform: scale(0.8, 0.8) translate3d(-58%, 0, 0);
transform: scale(0.8, 0.8) translate3d(-58%, 0, 0);
border-color: transparent;
}

.cssplay-menu {
position: fixed;
left: 50%;
top: 50vh;
width: 40vh;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
transform: translateX(-50%);
z-index: 1;
}

#menu-open:checked~#M1 {
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease, visibility 0.5s ease 0.5s;
}

.cssplay-menu .holder {
position: relative;
padding-bottom: 100%;
max-width: 100vh;
overflow: hidden;
--mask: radial-gradient(#0000 34.65%, #ffff 34.95% 67.5%, #0000 67.8% 69.5%, #ffff 69.7%);
-webkit-mask: var(--mask) no-repeat;
mask: var(--mask) no-repeat;
mask-position: 0 20vh;
mask-size: 100% auto;
}

.cssplay-menu input {
position: absolute;
display:  none;
}

.cssplay-menu .segment {
position: absolute;
z-index: 100;
left: 50%;
top: 100%;
margin-left: -48%;
margin-top: -48%;
width: 96%;
height: 96%;
border-radius: 50%;
overflow: hidden;
transform: scale(0);
transition: 0.5s cubic-bezier(.58, 2.4, 0.5, 0.5);
transition: 0.5s ease;
}

.menu-open:checked~.segment {
-webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
transform: scale(0.8, 0.8) translate3d(0, 0, 0);
}

.cssplay-menu .curve-upper {
position: absolute;
left: 1%;
top: 1%;
width: 98%;
height: 98%;
background: #fff;
border-radius: 50%;
transform: scale(0);
transition: 0s;
}

.cssplay-menu .curve-lower {
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
transform: rotate(-240deg) scale(0);
transition: 0s;
}

.cssplay-menu .curve {
display: block;
position: absolute;
left: 50%;
top: 50%;
width: 100%;
height: 100%;
background: #8b0000;
transform-origin: left top;
transform: rotate(0deg) skewY(60deg);
}

.cssplay-menu .segment label {
display: block;
position: absolute;
left: 50%;
top: 50%;
width: 50%;
height: 50%;
background: #389;
border: 1px solid #fff;
cursor: pointer;
transform-origin: left top;
transition: 0.25s cubic-bezier(0, 0, 1, 1);
transition: 0.25s ease;
}

.cssplay-menu .segment label span {
display: block;
position: absolute;
left: 0;
top: 0;
right: 15px;
bottom: 25px;
margin: auto;
width: 35px;
height: 35px;
background-position: center center;
background-repeat: no-repeat;
}

.cssplay-menu .segment label:nth-of-type(1) {
transform: rotate(-230deg) skewY(50deg);
}

.cssplay-menu .segment label:nth-of-type(2) {
transform: rotate(-200deg) skewY(50deg);
}

.cssplay-menu .segment label:nth-of-type(3) {
transform: rotate(-170deg) skewY(50deg);
}

.cssplay-menu .segment label:nth-of-type(4) {
transform: rotate(-140deg) skewY(50deg);
}

.cssplay-menu .segment label:nth-of-type(5) {
transform: rotate(-110deg) skewY(50deg);
}

.cssplay-menu .segment label:nth-of-type(6) {
transform: rotate(-90deg) skewY(60deg);
}

.cssplay-menu .segment label:nth-of-type(7) {
transform: rotate(100deg) skewY(50deg);
}

.cssplay-menu .segment label:nth-of-type(8) {
transform: rotate(140deg) skewY(50deg);
}

.cssplay-menu .segment label:nth-of-type(9) {
transform: rotate(180deg) skewY(50deg);
}

.cssplay-menu .center {
display: block;
position: absolute;
z-index: 20;
left: 50%;
top: 50%;
margin-left: -20%;
margin-top: -20%;
width: 40%;
height: 40%;
border-radius: 50%;
background: #8b0000;
overflow: hidden;
cursor: pointer;
box-shadow: 0 0 0 2px #fff;
}

.menu-open:checked~.cssplay-menu .holder .segment {
transition: 0.5s cubic-bezier(.58, 3, 0.5, 0.5);
transition: 0.5s ease;
transform: scale(1);
}

.menu-open:checked~.cssplay-menu .holder .center {
transition: 0.5s cubic-bezier(.58, 3, 0.5, 0.5);
transition: 0.5s ease;
transform: scale(1.2);
}

.menu-open:checked~.cssplay-menu .holder .curve-upper {
transition: 0.5s cubic-bezier(.58, 3, 0.5, 0.5);
transition: 1s ease;
transform: scale(1);
}

.menu-open:checked~.cssplay-menu .holder .curve-lower {
transition: 0.5s cubic-bezier(.58, 3, 0.5, 0.5);
transition: 1s ease;
transform: rotate(-240deg) scale(1);
}

.cssplay-menu #c1:checked~.holder .segment label:nth-of-type(1),
.cssplay-menu #c2:checked~.holder .segment label:nth-of-type(2),
.cssplay-menu #c3:checked~.holder .segment label:nth-of-type(3),
.cssplay-menu #c4:checked~.holder .segment label:nth-of-type(4),
.cssplay-menu #c5:checked~.holder .segment label:nth-of-type(5),
.cssplay-menu #c6:checked~.holder .segment label:nth-of-type(6),
.cssplay-menu #c7:checked~.holder .segment label:nth-of-type(7),
.cssplay-menu #c8:checked~.holder .segment label:nth-of-type(8),
.cssplay-menu #c9:checked~.holder .segment label:nth-of-type(9) {
background: #22c3e3;
}

.menu-open:checked~.cssplay-menu #c2:checked~#toggle:checked~.holder .curve-lower {
transform:  rotate(-210deg)
}

.menu-open:checked~.cssplay-menu #c3:checked~.holder .curve-lower {
transform: rotate(-180deg)
}

.menu-open:checked~.cssplay-menu #c4:checked~.holder .curve-lower {
transform: rotate(-150deg)
}

.menu-open:checked~.cssplay-menu #c5:checked~.holder .curve-lower {
transform: rotate(-120deg)
}

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

Techonology

Подробнее здесь: https://stackoverflow.com/questions/792 ... adial-menu