Home >Web Front-end >Front-end Q&A >How to implement polygons in css
How to implement polygons in css: first create an HTML sample file; then implement the parallelogram through the skew attribute of transform; then use the before pseudo-element to implement the triangle; and finally combine the parallelogram rows and triangles to implement the polygon.
The operating environment of this article: windows7 system, HTML5&&CSS3 version, DELL G3 computer
How to implement polygons in css?
CSS | Implementing interesting polygons
The road to front-end development is long. On the way to the web world, we must have encountered polygonal designs. The simplest way is to just upload the picture and start. As a front-end with "pursuit", of course you have to "self-abuse"... Today we will talk about how to implement polygons in front-end programming. First, upload a picture, and then we can Think about how to implement it first.
"How to implement it", "Is there any text in italics upwards", "Word Tian , you’d better give me the img directly, it feels so troublesome.” Relax, take a deep breath, and follow me to see how to polish CSS.
This label-like polygon can be seen as a combination of parallelograms and vertical triangles. First, add a rectangle:
How do you turn a rectangle into a parallelogram? Take a rectangle made of wire as an example. How do you turn it into a parallelogram? Someone answered: It's very simple, just twist it a little bit. By the way, it's distortion, the skew attribute of transform.
Hey, someone asked at this time, is it not slanting upward? How to break it, don’t worry, look:
##transform: skew(-10deg) rotate(-8deg)Okay, it’s almost done, but it’s still There is a triangle, here, the picture above:##Use width: 0;height: 0
Triangle code
As a css explorer, try setting different borders, combined with transform, to see what clever effects there are, pentagrams, octagons... With everything at your fingertips, attack the polygonal world.
Recommended learning: "
css video tutorialThe above is the detailed content of How to implement polygons in css. For more information, please follow other related articles on the PHP Chinese website!