倾斜容器内的矩形大小

Question

有没有什么方法或计算可以找出transform: skew();的容器的块大小？

这就是我想要实现的：

到目前为止，我一直在反复试验，但正如您所见，它不是动态的，有时它比边缘更远。

body,
html {
  width: 100vw;
  height: 100vh;
  position: relative;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) skew(-20deg);
  background: lime;
  width: 50%;
  height: 50%;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) skew(20deg);
  height: 100%;
  width: 81%;
  background: pink;
  opacity: 0.5
}

<div class="container">
  <div class="child"></div>
</div>

Answer 1

这与你要求的结构不完全一样，但相似，不需要任何复杂的计算。

原则是不要让孩子进入倾斜的块，而是在绝对位置的顶部。 因此，我们将堆叠 3 个相同大小的块。 如果你把后面的 2 个块倾斜，你只会得到一半的三角形。要获得完整的三角形，你可以玩transform-origin，你可以实现以下目标：

body,
html {
  width: 100vw;
  height: 100vh;
  position: relative;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: pink;
  width: 50%;
  height: 50%;
  opacity:0.7;
}

.container-l,
.container-r {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) skew(-20deg);
  transform-origin:50% 0%;
  width: 50%;
  height: 50%;
}
.container-l {
  transform-origin:50% 100%;
  background: lime;
}
.container-r {
  transform-origin:50% 0%;
  background: green;
}

<div class="container-r">
</div>
<div class="container-l">
</div>
<div class="container">
  <div class="child"></div>
</div>

Answer 2

首先让我们保持宽度为100%，并简单地调整变换的原点，使其具有：

body,
html {
  width: 100vw;
  height: 100vh;
  position: relative;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) skew(-20deg);
  background: lime;
  width: 50%;
  height: 50%;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) skew(20deg);
  transform-origin:top left;
  height: 100%;
  width: 100%;
  background: pink;
  opacity: 0.5
}

<div class="container">
  <div class="child"></div>
</div>

现在我们需要删除的部分是红色部分，如下所示：

考虑到我们有tan(angle) = X/H 的插图，其中angle 是倾斜角度（20deg），H 是我们要寻找的高度和X。所以我们需要删除H*tan(20deg) = 0.36369*H：

body,
html {
  width: 100vw;
  height: 100vh;
  position: relative;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) skew(-20deg);
  background: lime;
  width: 50%;
  height: 50%;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) skew(20deg);
  transform-origin:top left;
  height: 100%;
  width: calc(100% - 0.3639*50vh);
  background: pink;
  opacity: 0.5
}

<div class="container">
  <div class="child"></div>
</div>

现在我们有了良好的宽度，我们纠正了位置：

body,
html {
  width: 100vw;
  height: 100vh;
  position: relative;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) skew(-20deg);
  background: lime;
  width: 50%;
  height: 50%;
}

.child {
  position: absolute;
  top: 0;
  left: 0;
  transform: skew(20deg);
  transform-origin:top left;
  height: 100%;
  width: calc(100% - 0.3639*50vh);
  background: pink;
  opacity: 0.5
}

<div class="container">
  <div class="child"></div>
</div>

---

我不太确定这个形状的用途，但这里有另一个想法，无需复杂计算即可创建它：

body,
html {
  width: 100vw;
  height: 100vh;
  position: relative;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: 
    linear-gradient(to bottom right,transparent 49.8%,lime 50%) left/15% 100%,
    linear-gradient(to top    left ,transparent 49.8%,lime 50%) right/15% 100%,
    linear-gradient(lime,lime) center/70% 100%;
  background-repeat:no-repeat;
  width: 50%;
  height: 50%;
}

.child {;
  height: 100%;
  width:70%;
  margin:auto;
  background: pink;
  opacity: 0.5
}

<div class="container">
  <div class="child"></div>
</div>

您只需使内部矩形的宽度与居中渐变相同（在本例中为70%），然后将剩余的矩形拆分为左/右渐变，这将创建一个三角形。

您还可以轻松应用一些动画：

body,
html {
  margin:0;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: 
    linear-gradient(to bottom right,transparent 49.8%,lime 50%) left/15% 100%,
    linear-gradient(to top    left ,transparent 49.8%,lime 50%) right/15% 100%,
    linear-gradient(lime,lime) center/70% 100%;
  background-repeat:no-repeat;
  width: 50%;
  height: 50%;
  transition:1s;
}

.child {;
  height: 100%;
  width:70%;
  margin:auto;
  background: pink;
  opacity: 0.5;
  transition:1s;
}

.container:hover {
  background-size:0% 100%,0% 100%,100% 100%;
}

.container:hover .child{
  width:100%;
}

<div class="container">
  <div class="child"></div>
</div>