在不改变元素位置的情况下变换倾斜答案

【问题标题】：Transform skew without changing element position在不改变元素位置的情况下变换倾斜
【发布时间】：2021-12-28 05:53:34
【问题描述】：

我使用 CSS 倾斜变换创建了以下标记（用于演示的示例）：

.wrapper {
  height: 100px;
  width: 200px;
  position: relative;
  background-color: orange;
}
.inner {
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  transform: skew(30deg);
  background-color: blue;
  opacity: .7;
}

<div class="wrapper">
  <div class="inner"></div>
</div>

问题是内部 div .inner 位于容器 .wrapper 之外，即使我将 right 设置为 0，因为内部 div 倾斜了 30 度。如何定位内部 div，最右边的部分位于同一位置？我可以对 right 的值进行硬编码，但是对于不同的屏幕尺寸，它的显示会有所不同。如果我将外部 div 的溢出设置为隐藏，右侧仍然会错位。我见过this post，它建议使用transform-origin 和-webkit-transform-origin，我将它们设置为right，但没有一个解决方案有效。我能做什么？

【问题讨论】：

标签： html css position css-transforms skew

【解决方案1】：

你需要transform-origin: bottom

.wrapper {
  height: 100px;
  width: 200px;
  position: relative;
  background-color: orange;
}
.inner {
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  transform: skew(30deg);
  transform-origin: bottom;
  background-color: blue;
  opacity: .7;
}

<div class="wrapper">
  <div class="inner"></div>
</div>

【讨论】：

感谢您的回答！有效。我只是想知道，当我输入right 而不是bottom 时，为什么transform-origin 不起作用？我如何才能选择正确的？
@code 您需要熟悉转换的工作原理。如果您愿意，这里有一个详细的答案：stackoverflow.com/a/52093362/8620333

【解决方案2】：

Skew 将转换 div，在本例中为 X 方向，类似于 translate。这是我在codepen 中使用倾斜和翻译进行的测试。这是我添加的内容：

    .inner {
    width: 50%;
    height: 100%;
    position: absolute;
    transform: skew(30deg) translateX(71.5px);
    background-color: blue;
    opacity: .7;
    }

【讨论】：

是的，但正如我所提到的——如果我硬编码一个正确的值（或translateX），它会在屏幕调整大小时改变。另外，我尽量避免硬编码 CSS 值（出于同样的原因）。
您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。