如何使用 CSS3 變換僅傾斜元素的一側？

CSS3 變換僅一側傾斜

CSS 變換是一種強大的工具，可用於操縱網頁上元素的外觀。最通用的變換之一是傾斜變換，它可用於以指定角度傾斜元素。

但是，預設情況下，傾斜變換會同等地影響元素的兩側。在某些情況下，這可能會受到限制，例如當您只想傾斜元素的一側（例如背景圖像）時。

幸運的是，有一種方法可以使用 CSS 僅傾斜元素的一側。透過對要傾斜的元素使用嵌套 div，您可以將傾斜變換套用到父 div，然後將相反的傾斜變換套用到子 div。這將有效地僅傾斜元素的一側。

以下是如何僅傾斜元素的一側的範例：

.container {
  overflow: hidden;
}

#parallelogram {
  width: 150px;
  height: 100px;
  margin: 0 0 0 -20px;
  -webkit-transform: skew(20deg);
  -moz-transform: skew(20deg);
  -o-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;
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  -o-transform: skew(-20deg);
}

此 CSS 將建立一個帶有紅色的 div背景，寬度和高度分別為 150px 和 100px。 div 將向右傾斜 20 度並包含影像。透過應用相反的傾斜變換（-20deg），影像將不再傾斜。

以上是如何使用 CSS3 變換僅傾斜元素的一側？的詳細內容。更多資訊請關注PHP中文網其他相關文章！