How to use transform skewX in css3 to implement a parallelogram navigation menu

The content of this article is about how to use transform skewX in css3 to implement a parallelogram navigation menu. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

A parallelogram is actually a superset of a rectangle: its sides are parallel in pairs, but its corners are not necessarily right angles. In visual design, parallelograms can often convey a sense of movement.
Let’s try creating a button-like parallelogram link using CSS. Our starting point is an ordinary block button, supplemented by some simple styles. Then, we can use the deformation property of skew() to stretch the rectangle diagonally:

transform: skewX(-45deg);

However, this results in Its content is also distorted sideways, which is unsightly and difficult to read. Is there a way to just tilt the shape of the container while keeping its contents the same?

Many people will think of the nested element solution, then we can apply another reverse skew() deformation to the content to offset the deformation effect of the container and finally produce the results we expect. Unfortunately, this means that we will have to use an extra layer of HTML elements to wrap the content, such as a span:

<a href="www.php.cn" class="button">
 <span>www.php.cn</span>
</a>
.button { transform: skewX(-45deg); }
.button > span { transform: skewX(45deg); }

As we can see, this method performs very well, but it also means that So we have to add additional HTML elements. If changes to the structural layer are not allowed, or you want to strictly maintain the purity of the structural layer, don’t worry, we also have a pure CSS solution.

Pseudo-element solution

Another idea is to apply all styles (background, border, etc.) to pseudo-elements, and then transform the pseudo-elements. Because our content is not contained in a pseudo-element, the content will not be affected by the transformation. Let’s see if this technique can get the same link style as before.

We want pseudo-elements to remain flexible and automatically inherit the dimensions of their host element, even when the host element's dimensions are determined by its content. A simple solution is to apply the position: relative style to the host element and set position: absolute to the pseudo element, and then set all offsets to zero so that it is stretched to the host element both horizontally and vertically. size of. The code looks like this:

.button {
 position: relative;
 /* 其他的文字颜色、内边距等样式…… */
}
.button::before {
 content: '';
 position: absolute;
 top: 0; right: 0; bottom: 0; left: 0;
}

At this time, the square generated with the pseudo-element overlaps the content. Once a background is set to it, it will cover the content. To fix this problem, we can set the z-index: -1 style for the pseudo-element so that its stacking level will be pushed behind the host element. Now the last step we have to do is to morph it as much as we want and enjoy the beautiful results. The final version of the code is as follows, and the visual effect it produces is exactly the same as the technique mentioned above:

.button {
 position: relative;
 /* 其他的文字颜色、内边距等样式…… */
}
.button::before {
 content: ''; /* 用伪元素来生成一个矩形 */
 position: absolute;
 top: 0; right: 0; bottom: 0; left: 0;
 z-index: -1;
 background: #58a;
 transform: skew(45deg);
}

This technique is not only useful for skew() deformation, but also applies to any other deformation style. , which can be used when we want to deform an element without deforming its content. For example, if we slightly adjust this technique to the rotate() deformation style, and then use it on a square element, we can easily get a diamond shape.

The key to this technique is that we use pseudo-elements and positioning attributes to generate a box, then style the pseudo-element and place it below its host element. This idea can also be used in other scenes to achieve various effects.

The above is the detailed content of How to use transform skewX in css3 to implement a parallelogram navigation menu. For more information, please follow other related articles on the PHP Chinese website!