如何使用 CSS3 變換僅傾斜圖像的一側？

使用 CSS3 變換傾斜一側

在 CSS3 中傾斜圖像是一項簡單的任務，但僅傾斜一側可能會更具挑戰性。

當您有影像背景而不是純色時，提供的使用邊框屬性的解決方案不適合。此外，傾斜元素的兩側而不是僅一側可能會受到限制。

要實現單側傾斜，請考慮以下方法：

消除影像傾斜

使用嵌套的 div 元素來儲存影像。對嵌套 div 應用相反的傾斜值，以抵消應用於父級的傾斜。

範例程式碼：

<div class="container">
  <div>
<pre class="brush:php;toolbar:false">.container {
  overflow: hidden;
}

#parallelogram {
  width: 150px;
  height: 100px;
  margin: 0 0 0 -20px;
  transform: skew(20deg);
  background: red;
  overflow: hidden;
  position: relative;
}

.image {
  background: url(image.jpg); /* Replace with your image URL */
  position: absolute;
  top: -30px;
  left: -30px;
  right: -30px;
  bottom: -30px;
  transform: skew(-20deg);
}

此設定僅有效傾斜影像的一側，使另一側保持直線。由於父容器上的溢出：隱藏屬性，傾斜區域保持透明。