CSS How to make hexagon pictures

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

With a simple div with pseudo-elements, you can ' draw ' this hexagon image, the principle is three identical wide-height div, by positioning the rotation to create a hexagon, and then use the background map stacked to form 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 div with a wide height.

Before you draw, you must understand a problem, that is, the equilateral hexagon is formed by three identical wide div (as shown, so the width of the div 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>
(2) Second step, draw left div and its pseudo element picture

 This step is to rotate the left side of the flattened hexagon with the new Div and set the background image to be wide and consistent with the pseudo-elements of the new Div, noting that the width of the new div pseudo-element is the width height of the entire hexagon. Then rotate the pseudo-element to make the picture appear vertically (it should be rotated for the new Div, so the pseudo-element picture is rotated, so you need to reverse-rotate back to normal) and also adjust the pseudo-element position (the new Div rotates, affects the pseudo-element location), and the new Div is set beyond the hidden, and the hexagon is drawn 

<! DOCTYPE html>
(3) Third step, draw right div 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 seen these cases you have mastered the method, more wonderful please pay attention to the PHP Chinese network other related articles!

Related reading:

How the HTML5 drop-down box should increase the user experience

How to make JSON and echarts diagrams in the same interface with H5 WebGL

How H5 's semantic tag new features should be used