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.

Rendering

"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:

Simple width, height

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.

transform: skew(-10deg);

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

The code is as follows:

Triangle code

Why use before pseudo-element? You know, to facilitate layout, the width and height are both 0 very cleverly, and the color and position of the border are used to set it, including most polygons you usually see, which is almost the same principle. The final code is as follows:

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 tutorial

"

The 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!