如何建立具有透明區域的單面 CSS3 傾斜變換效果？

一側的 CSS3 傾斜變換

了解如何建立「CSS3 一側傾斜變換」效果對於各種網頁設計專案非常有用。但是，請務必注意，在使用圖像作為背景時，簡單地應用傾斜變換可能不會產生所需的結果。

解決問題

在您的特定情況下在這種情況下，您需要CSS3 轉換來僅傾斜圖像的一側，同時保持透明的傾斜區域。所提供的使用實心邊框的解決方案無法有效實現此效果。

解決方案：具有相反傾斜的嵌套Div

要實現所需的效果，請考慮使用嵌套div 為圖像並應用與父div 相反的傾斜值。例如，如果您對父容器套用了 20 度傾斜，則為嵌套（圖片）div 設定 -20 度的傾斜值。

範例程式碼：

為了演示，這裡有一個使用容器和巢狀div 的範例：

.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(http://placekitten.com/301/301);
  position: absolute;
  top: -30px;
  left: -30px;
  right: -30px;
  bottom: -30px;
  transform: skew(-20deg);
}

This程式碼將在紅色平行四邊形容器上創造20 度的傾斜。在其中，影像將放置在傾斜 -20 度的嵌套 div 中，有效地反轉應用於父容器的傾斜並顯示其後面的透明傾斜區域。

以上是如何建立具有透明區域的單面 CSS3 傾斜變換效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！