How CSS makes hexagon images

This time to everyone to bring CSS how to make hexagon pictures, CSS to make hexagon pictures of what to note, the following is the actual case, together to see.

This article mainly introduces the CSS implementation of Hexagon image sample code, share to everyone, as follows:

Do not say anything else, first on the effect:

With a simple p with pseudo-elements, you can ' draw ' this hexagon picture, the principle is three identical wide-high p, by positioning the rotation of a hexagon, and then using the background map stacked, forming a visual image of the whole picture. Let's take a step-by-step implementation.

(1) So the first step, of course, is to draw the container, which is a p with a wide height.

Before drawing, you must understand a problem, that is, the equilateral hexagon is formed by three identical wide P (as shown), so the width of P must meet √ 3 times times the condition to be able to spell a positive hexagon, here does not take you to calculate this value, there is interest can be used in private calculation of the trigonometric functions.

　　　　　　　　　　

Here, I set the outer container width to 190px, height to 110px, and then set the background picture. The code is as follows

<! DOCTYPE html>
The effect is a picture


(2) Second step, draw left p and its pseudo element picture

This step, using the new P positioning to rotate the left side of the flattened hexagon, and to set the new P pseudo-element width and set a consistent background image, note that the new P pseudo-elements of the width of the entire hexagon width height. Then rotate the pseudo-element so that the picture is displayed vertically (the new p should be rotated, so the pseudo-element picture is rotated, so you need to reverse the rotation back to the normal angle) and also to adjust the pseudo-element position (the new P rotation, affecting the location of pseudo-element positioning), and finally give this new P set beyond the hidden, hexagon

<! DOCTYPE html>
The effect is as follows:


(3) Third step, draw right p and its pseudo element picture

This principle is the same as the second one, except that the angle is reversed, so do not repeat it, directly on the complete code

<! DOCTYPE html>
At this point, you can show the first picture of the article, using this principle, but also can make other shapes of the picture display effect. You are welcome to continue the study. After the picture show is no longer a single brick line!!

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

Animated sequence of CSS3 animation

How CSS quirks box models and standard box models are used