使用 :after 元素制作旋转的标题和父 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%);