如何根据高度调整旋转，理想情况下仅在css中?

Question

我有一个与父元素大小相同的::before元素，但是稍微旋转了一下。它在许多地方使用，父元素的高度根据内容而变化。

我遇到的问题是使用(例如)transform: rotate(-1deg);对小元素旋转不够，而对大元素旋转太多。

这是一个jsfiddle示例(下面的代码片段)——将鼠标悬停在蓝色框上，看看当蓝色框变高时，橙色框会发生什么变化。

.container {
width            : 26px;
border           : 1px solid #999;
display          : flex;
justify-content  : center;
margin           : 0 auto;
padding          : 3px 0;
}
.box {
height           : 60px;
width            : 20px;
background       : blue;
position         : relative;
transition       : height 1s ease-in-out;
}
.box:hover {
height           :400px;
}
.box::before {
content          : "";
position         : absolute;
height           : 99%;
width            : 99%;
background-color : orange;
left             : 0px;
top              : -1px;
transform        : rotate(-3deg);
z-index          : -1;
transform-origin : center center;
}

<div class='container'>
<div class='box'> </div>
</div>

我该如何应对这种影响，而不是旋转度的数量是常数，像素宽度从左上角的::前和左上角的父元素是(大致)常数?我不需要它是精确的，只要不疯狂当内容使父元素非常高。

我试图确定是否有一个css唯一的解决方案。我可以找出一种方法来做到这一点与js通过简单地改变旋转度为一个数字计算基于父元素的高度后插入内容。

备选版本，左边为正确，中间为错误，右边为正确。高度没有定义，可能会动态变化。https://jsfiddle.net/4x6qdtv7/

.container {
float: left;
width: 26px;
border: 1px solid #999;
display: flex;
justify-content: center;
margin-right: 10px;
padding: 3px 0;
}
.c1 .box {
height: 60px;
}
.c2 .box {
height: 400px;
}
.c3 .box {
height: 400px;
}
.box {
height: 60px;
width: 20px;
background: blue;
position: relative;
}
.box:hover {
height:400px;
}
.c1 .box::before, .c2 .box::before {
transform: rotate(-3deg);
}
.c3 .box::before {
transform: rotate(-.4deg);
}
.box::before {
content: "";
position: absolute;
height: 99%;
width: 99%;
background-color: orange;
left: 0px;
top: -1px;
z-index: -1;
transform-origin: center center;
}

<div class='container c1'>
<div class='box'> </div>
</div>
<div class='container c2'>
<div class='box'> </div>
</div>
<div class='container c3'>
<div class='box'> </div>
</div>

Answer 1

您可以使用clip-path以不同的方式近似。调整主容器的大小，看看结果:

.box {
--d:15px;  /*adjust this */
width:100px;
height:200px;
border:1px solid red;
padding:15px; /* this */
position:relative;
z-index:0;
overflow:hidden;
resize:both;
}
.box div{
height:100%;
background:blue;
}
.box::before {
content:"";
position:absolute;
margin:5px; /* and this */
top:0;
left:0;
right:0;
bottom:0;
z-index:-1;
background:green;
clip-path:polygon(0 var(--d),calc(100% - var(--d)) 0,100% calc(100% - var(--d)),var(--d) 100%);
}

<div class="box"> 
<div></div>
</div>

Answer 2

回答时看到Temani Afif所以我犹豫了。
现在我告诉自己，这个答案仍然会让人感兴趣(而且它要简单得多)。

它还展示了如何使用不同的单位进行计算

.container {
float            : left;
width            : 26px;
border           : 1px solid #999;
display          : flex;
justify-content  : center;
margin-right     : 10px;
padding          : 3px 0;
--clr            : orange; 
}
.container:hover {
--clr  : yellow; 
}
.c1 .box { --hgt : 100; }
.c2 .box { --hgt : 200; }
.c3 .box { --hgt : 400; }
.c1:hover .box { --hgt : 200; }
.c2:hover .box { --hgt : 400; }
.c3:hover .box { --hgt : 100; }
.box {
height           : calc(1px * var(--hgt));
width            : 20px;
background       : blue;
position         : relative;
transition       : height 1s ease-in-out;
}
.box::before {
content          : "";
position         : absolute;
height           : 100%;
width            : 99%;
background-color : var(--clr);
left             : 0;
top              : -1px;
transform        : rotate( calc(-500deg / var(--hgt))); /* adjust 500deg */
z-index          : -1;
transform-origin : center center;
}

<div class='container c1'>
<div class='box'></div>
</div>
<div class='container c2'>
<div class='box'> </div>
</div>
<div class='container c3'>
<div class='box'> </div>
</div>