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

Question

我有一个 ::before 元素，它与父元素大小相同，但稍微旋转了一点。它用在很多地方，父元素的高度因内容而异。

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

Here is a jsfiddle example（下面的片段）- 将鼠标悬停在蓝色框上，以查看当蓝色框更高时橙色框会发生什么。

.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>

我怎样才能抵消这种影响，而不是旋转的度数是常量，从 ::before 的左上角到父元素的左上角的像素宽度（大致）是常量？我不需要它是准确的，只是当内容使父元素非常高时不要疯狂。

我正在尝试确定是否有 css 唯一的解决方案。我可以想出一种方法，只需将旋转度数更改为插入内容后根据父元素高度计算的数字即可。

替代版本，左边正确，中间不正确，右边正确。高度未定义，可能会动态变化。 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>

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

How do I adjust rotation based on height, ideally in css only?

css

css-transforms