Home > Article > Web Front-end > How to Create a Slanted Background Using CSS Pseudo Elements?
Creating Slanted Backgrounds with CSS
Creating a slanting background can be achieved using a variety of CSS styling options. One effective approach involves utilizing pseudo elements along with skew transformations.
Implementation with CSS Pseudo Element
The following CSS code demonstrates how to create a slanting background using a pseudo element:
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; }
This code creates a斜斜背景 located on the left side of the container. The transform: skew(-30deg) property tilts the pseudo element, resulting in the desired slant.
The above is the detailed content of How to Create a Slanted Background Using CSS Pseudo Elements?. For more information, please follow other related articles on the PHP Chinese website!