css - 使用 :after element to make header that is rotated and height of the parent 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  */

Updated codepen

---

顺时针旋转

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