Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "how to use transform skewX in css3 to achieve parallelogram navigation menu". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

A parallelogram is actually a superset of a rectangle: its edges are parallel, but each angle is not necessarily a right angle. In visual design, parallelograms can often convey a sense of motion.

Let's try to create a button-like parallelogram link with CSS. Our starting point is a normal block button with some simple styles, and then we can stretch the rectangle diagonally through the deformation property of skew ():

Transform:skewX (- 45deg)

However, this leads to the oblique deformation of its content, which is not good-looking and difficult to read. Is there any way to tilt the shape of the container and keep its contents unchanged?

Many people will think of the nested element scheme, so we can apply the reverse skew () deformation to the content again to counteract the deformation effect of the container and eventually produce the desired result. Unfortunately, this means that we will have to wrap the content with an extra layer of HTML elements, such as a span:

Www.php.cn

.button {transform:skewX (- 45deg);}

.button > span {transform:skewX (45deg);}

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

Pseudo-element scheme

Another idea is to apply all styles (backgrounds, borders, etc.) to pseudo-elements, and then deform them. Because our content is not contained in pseudo-elements, the content will not be affected by deformation. Let's see if this technique can get the same link style as before.

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

.button {

Position:relative

/ * other text colors, margins, etc. , /

}

.button:: before {

Content:''

Position:absolute

Top:0;right:0;bottom:0;left:0

}

At this point, the box generated by the pseudo element overlaps the content, and once the background is set for it, the content is obscured. To fix this problem, we can style the pseudo element with z-index:-1 so that its stacking hierarchy is pushed behind the host element. Now the last step we need to do is to set the deformation style to it as much as we can and enjoy the good results. The final version of the code is shown below, and the visual effect is exactly the same as the technique described earlier:

.button {

Position:relative

/ * other text colors, margins, etc. , /

}

.button:: before {

Content:'';/* uses pseudo elements to generate a rectangle * /

Position:absolute

Top:0;right:0;bottom:0;left:0

Z-index:-1

Background:#58a

Transform:skew (45deg)

}

This technique is useful not only for skew () morphing, but also for any other morph style, which can be used when we want to deform an element rather than its contents. For example, we can easily get a diamond by adjusting this technique slightly for the rotate () deformation style and then applying it to a square element.

The key to this technique is that we use pseudo-elements and positioning attributes to generate a square, then style the pseudo-element and place it below its host element. This idea can also be applied to other scenarios to get a variety of effects.

"how to use transform skewX in css3 to achieve parallelogram navigation menu" is introduced here, thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.