CSS implementation of Hexagon image (the simplest way to achieve high-force picture display)

Do not say anything else, first on the effect:

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>
The effect is a picture
(2) Second step, draw left div and its pseudo element picture
In this step, the new div is positioned to rotate the left side of the flattened hexagon, and the pseudo-elements of the new Div are set wide and consistent with the background image, noting that the width height of the new div pseudo-element is the width 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
 1 <! DOCTYPE html> 2 
The effect is as follows:
(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!!
Original link: http://www.cnblogs.com/wangEddy/p/7910419.html
Tags: css technology good text to the top attention to my collection of this article
CSS implementation of Hexagon image (the simplest way to achieve high-force picture display)