css implements parallelogram and other special shapes of text and pictures to tilt

Implementation method: CSS property`transform: skew(x,y)`

skew()The function defines an oblique transformation of an element on a two-dimensional plane. Specify one or two parameters that represent the amount of tilt to apply in each direction.
This transformation is a shear mapping (crosscutting) that distorts each point within the cell by a certain angle both horizontally and vertically. The coordinates of each point are scaled proportionally to the specified angle and distance from the origin; thus, the farther a point is from the origin, the greater its increment.

grammar: transform:skew(x,y);

In layman's terms, the two parameters represent the tilt angles of the X-axis and the Y-axis respectively. If the second parameter is empty, it defaults to 0. A positive parameter means a clockwise tilt, and a negative parameter means a tilt in the opposite direction (counterclockwise).
skewX(<angle>);Indicates only tilting on the X axis (horizontal direction).
skewY(<angle>);Indicates only tilting on the Y axis (vertical direction).

example

1. The X axis is tilted, the Y axis is not tilted`transform:skew(ax) == transform:skewX(ax)`

	transform: skew(30deg);
	transform: skewX(30deg);

Realize the effect:
insert image description here

2. The X axis is not tilted, and the Y axis is tilted`transform:skewY(ay)`

	transform: skewY(15deg);

Realize the effect:
insert image description here

3. Both the X axis and the Y axis are tilted`transform:skew(ax,ay)`

	transform: skew(30deg,15deg);

Realize the effect:
insert image description here

compatible:

div {
    
    
	transform: skew(30deg,20deg);
	-ms-transform: skew(30deg,20deg); /* IE 9 */
	-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}

example

1. Write a parallelogram in which the text is not inclined.
When we set the tilt to the parent element, the parent element and its child elements will be tilted. If you want the parent element to be tilted and the child element not to be tilted, just set a negative value for the child element.

	<div class="box"> 
		<div>哈哈哈哈哈哈哈</div>
	</div>

.box {
    
    
    width:200px;
    height:30px;
    transform: skew(30deg);
    background:pink;
}

.box div {
    
    
    font-size: 16px;
    line-height: 30px;
    text-align: center;
    transform: skew(-30deg);
}

Achievement effect:
insert image description here
If it is helpful to you, please remember to click triple link