How to Skew Only One Side of an Element with CSS3 Transforms?

CSS3 Transform Skew Only One Side

CSS transforms are a powerful tool that can be used to manipulate the appearance of elements on a web page. One of the most versatile transforms is the skew transform, which can be used to tilt an element at a specified angle.

However, by default, the skew transform affects both sides of an element equally. This can be limiting in some cases, such as when you want to skew only one side of an element, such as a background image.

Fortunately, there is a way to skew only one side of an element using CSS. By using a nested div for the element that you want to skew, you can apply the skew transform to the parent div and then apply the opposite skew transform to the child div. This will effectively skew only one side of the element.

Here is an example of how to skew only one side of an element:

.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);
}

This CSS will create a div with a red background and a width and height of 150px and 100px, respectively. The div will be skewed at a 20-degree angle to the right and will contain an image. The image will be unskewed by applying the opposite skew transform (-20deg) to it.

The above is the detailed content of How to Skew Only One Side of an Element with CSS3 Transforms?. For more information, please follow other related articles on the PHP Chinese website!