This is the 20th day of my participation in the More text Challenge. For more details, see more text Challenge
preface
Hi, everybody. Did you have a good weekend? Good times always pass quickly, with friends, take the dog out for a half-day run, the weekend so blink of an eye. However, I was full of motivation to stay up late when I thought that today’s bigger task was not finished.
Today we are going to use CSS to make a parallelogram. This problem came to me in the interview before. At that time, I only thought of using skew() to make a twisting and oblique stretching effect, which was not considered in a comprehensive way.
The implementation process
Since we thought of using skew() to do a distorted and oblique stretching effect, we must have a certain understanding of this property:
Skew () defines the skew transformation of an element on a two-dimensional plane, receiving two parameters:
Ax is the Angle used to twist the element along the abscissa.
Ay is the Angle used to twist the element along the ordinate. If not defined, it defaults to 0, resulting in a pure horizontal skew.
A special note: this element does not apply to inline elements, and inline elements do not inherit this attribute value.
We can make this simple:
<style>
h1{
margin: 300px auto;
width: 200px;
height: 100px;
background-color: cornflowerblue;
color: bisque;
transition: all 3s;
}
h1:hover{
transform: skewX(-45deg);
}
</style>
<h1>Antarctic ice</h1>
Copy the codeRun it, and the effect is as follows:
Deformation is no problem, but the contents of the inside also follow deformation is how to return a responsibility ah feed!
Skew () : Skew () : skew() : skew() : skew() : skew() : skew()
<style>
div{
margin: 300px auto;
width: 200px;
height: 100px;
background-color:cornflowerblue;
transition: all 3s;
}
h1{
color: bisque;
transition: all 3s;
}
div:hover{
transform: skewX(-45deg);
}
div:hover h1{
transform: skewX(45deg);
}
</style>
<div>
<h1>Antarctic ice</h1>
</div>
Copy the codeRun it, and the effect is as follows:
It looked fine, but we had to put an extra box inside it to cover everything, which was too much trouble, and the structure didn’t look very friendly. If you go back and change it, you can’t see what you’re doing by putting a layer of boxes around the element.
So is there a better way? That’s right, come on out! Omnipotent pseudo element!!
We can add the attribute skew() to the pseudo-element to create a distorted and oblique stretching effect. In this way, the distorted effect will only apply to the pseudo-element, and we don’t have to worry about unnecessary distortion of the contents of the box. Just use position: Absolute to make the pseudo-element inherit the width and height of the main element completely, as follows:
<style>
h1{
margin: 300px auto;
width: 200px;
height: 100px;
position: relative;
color: bisque;
}
h1::after{
content: ' ';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color:cornflowerblue;
transition: all 3s;
}
h1:hover::after{
transform: skewX(-45deg);
}
</style>
<h1>Antarctic ice</h1>
Copy the codeRun it, and the effect is as follows:
How can the pseudo-element overwrite the main element? It is important to note that the pseudo-element is generated at a higher level than the current element, and all events of the current element are inherited from the pseudo-element. In a previous article, “How to Control CSS Mouse Styles and expand the Mouse Click area | Weekend Study”, this property was used to expand the mouse click area by clicking.
So we just add a z-index: -1 to the pseudo-element
<style>
h1{
margin: 300px auto;
width: 200px;
height: 100px;
position: relative;
color: bisque;
}
h1::after{
content: ' ';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color:cornflowerblue;
transition: all 3s;
z-index: -1;
}
h1:hover::after{
transform: skewX(-45deg);
}
</style>
<h1>Antarctic ice</h1>
Copy the codeRun it, and the effect is as follows:
A perfect parallelogram!! In the same way, if you want to do a circular diamond what certainly not under the words ~
Afterword.
Today is the twentieth day that I insist on daily change, time passes so fast, it has been twenty days unconsciously, this weekend is also over ~ every day a little output, a little progress. Where there is a will, there is a way. Come on, everybody
If this post helped you, keep an eye on big ice and give it a like
The list of more challenging articles is as follows:
- Flex layout container elements and project elements attributes
- 2021.06.02 how to play with CSS Gradient Background
- How to Use SVG to create Text Effects along Arbitrary Paths
- 2021.06.04 “Front-end code specification of 3 categories and 15 subcategories, let the team code be standardized!”
- Git Commit Specification for team management: How many people don’t write commit records?
- 2021.06.06 “How to Control CSS mouse Style and Expand mouse Click area | Weekend study”
- 2021.06.07 “Pure CSS implementation: imitation gold mining account password login, the red panda wu eye action switch small Egg”
- On Prototypes and Prototype Chains in 11 Aspects
- A Closer Look at JavaScript scope and Scope Chains
- What is a closure in JavaScript?
- 2021.06.11 pure CSS Implementation: Cool Video Text Mask Effects
- Apply a free API and use native JS to create typewriter-like vertical lines of text
- Pure CSS implementation: Zebra stripes inside multi-line Text boxes
- 2021.06.14 “Native JS implementation touch slide listening event”
- 2021.06.15 “Native JS To achieve mouse wheel triggered page horizontal Scrolling”
- 2021.06.16 “When the native JS realizes jump or refresh the page, the browser prompts that the current page is not saved”
- 2021.06.17 “Three Basic Pop-ups of Native JS”
- Pure CSS implementation: A button fixed at the bottom of the page
- Pure CSS Implementation: Typewriter Animation for single lines of text