不失真的背景圖像？

Question

我需要傾斜包含背景圖像的div的形狀，而不會實際扭曲背景圖像。

現在我使用的變換：歪斜（-25deg）

是否有可能做到這一點不失真？

Answer 1

您需要將背景圖像添加到歪斜元素的子元素上，然後將相反歪斜應用於子元素。這裏有一個例子：

.parent { 
 
    height: 100px; 
 
    overflow: hidden; 
 
    transform: skew(0.5rad, 0); 
 
    width: 100px; 
 
} 
 
.child { 
 
    background: linear-gradient(to right, red 0%, blue 100%); 
 
    height: 100%; 
 
    transform: skew(-0.5rad, 0); 
 
    width: 100%; 
 
}

<div class="parent"> 
 
    <div class="child"> 
 
    etc. 
 
    </div> 
 
</div>