How to Create a Slanted Background with CSS?

Creating Slanted Backgrounds with CSS

In this question, the user aims to create a slanted background using CSS. They provide an image showing the desired layout and describe the code they've tried, which hasn't produced the intended result.

To achieve the desired slanted background, we can utilize a pseudo-element with skew transformation. This technique offers precise control over the angle and position of the slanted element.

The following code demonstrates how to create a slanted background:

body {
  height: 100vh;
  margin: 0;
  background: yellow;
}

body:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 300px;
  background: #000;
  transform: skew(-30deg);
  transform-origin: top;
}

In this code, we introduce a pseudo-element, ":before," that will act as the slanted background. We position this pseudo-element absolutely within the body to control its placement. The "transform: skew(-30deg)" property skews the pseudo-element, creating a slanted effect. The "transform-origin: top" property specifies that the skew should originate from the top of the pseudo-element, ensuring that the background slants across the entire element.

The above is the detailed content of How to Create a Slanted Background with CSS?. For more information, please follow other related articles on the PHP Chinese website!