使用 :after 元素使 header 旋转和 parent div 的高度

Question

整个下午都在为此苦苦挣扎。我希望黑色 header 完美地位于四分之一圆的右侧并动态填充高度。颜色旨在离开屏幕，并将在鼠标悬停时使用旋转动画将它们旋转。

您可以在此处查看代码笔：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%);

使用 :after 元素使 header 旋转和 parent div 的高度

Using :after element to make header that is rotated and height of the parent div

css

css-transforms