我使用 CSS skew 變換創建了以下標記（一個演示示例）：
.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 的溢位設定為隱藏，則右側仍然會未對齊。我看過這篇文章，建議使用transform-originand -webkit-transform-origin，但沒有一個解決方案有效。我能做什么？
uj5u.com熱心網友回復：
你需要 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>uj5u.com熱心網友回復：
Skew 將轉換 div，在這種情況下是在 X 方向，類似于平移。這是我在codepen 中使用 skewed 和 translate 進行的測驗。這是我添加的內容：
.inner {
width: 50%;
height: 100%;
position: absolute;
transform: skew(30deg) translateX(71.5px);
background-color: blue;
opacity: .7;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/395759.html