Использование: после элемента, чтобы сделать заголовок, который вращается и высота родительского div

Question

Боролся с этим весь день. Я хочу, чтобы черный заголовок располагался идеально справа от четверти круга и динамически заполнял высоту. Цвета предназначены для вывода за пределы экрана и будут использовать анимацию поворота при наведении курсора, чтобы повернуть их.

Вы можете проверить кодекс здесь: https://codepen.io/Dawsraki/pen/LLrajZ

.quarter{
    position: fixed;
    width: 40vh;
    height: 40vh;
}
.quarter1{
    top: 0;
    left: 0;
    background-color: red;
    border-radius: 100% 0 0 0;
}
.quarter1:after{
    content:"Home";
    width:40vh;
    position:absolute;
    right:0;
    transform: rotate(-90deg);
    background:black;
    color:white;
    /* Safari */
    -webkit-transform: rotate(-90deg);
    /* Firefox */
    -moz-transform: rotate(-90deg);
    /* IE */
    -ms-transform: rotate(-90deg);
    /* Opera */
    -o-transform: rotate(-90deg);
    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    transform: rotate(-90deg);
}

Answer 1

Вам нужно объединить rotate с translate и установить правильный transform-origin

transform: rotate(-90deg) translateX(-50%);        /*  counter clockwise  */
transform-origin: center top;                      /*  defaults to center center  */

Обновленный кодекс

---

Для вращения по часовой стрелке

transform: rotate(90deg) translateX(50%);