How to make a hexagonal picture in css

This time I will show you how to make a hexagonal picture with css. What are theprecautions for making a hexagonal picture with css? The following is a practical case, let's take a look.

Using simple divs and pseudo elements, you can 'draw' this hexagonal picture. The principle is that three divs of the same width and height are combined into a hexagon through positioning and rotation, and then the background is used The pictures are layered to form a visual whole picture. Let’s implement it step by step below.

(1) Then the first step is, of course, to draw the container. The container is a div with width and height.

Before drawing, you must understand one issue, that is, the equilateral hexagon is formed by joining three divs with the same width and height (as shown in the figure below, so the width and height of the div must satisfy √3 times of conditions can be combined into a regular hexagon. I won’t teach you how to calculate this value here. If you are interested, you can use trigonometric functions to calculate it yourself.

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

(2) The second step is to draw the left div and its pseudo-element image

. Use the new div to position and rotate. Flatten the left side of the hexagon, and set the width and height of the new div pseudo element and set the background image consistent with the picture above. Note that the width and height of the new div pseudo element are the width and height of the entire hexagon, and then rotate the pseudo element to make it so. The image is displayed vertically (the new div should be rotated, so the pseudo-element image is also rotated, so it needs to be reversely rotated back to the normal angle) and the position of the pseudo-element must be adjusted (the new div is rotated, which affects the positioning of the pseudo-element), and finally This new div is set beyond hiding, and the left side of the hexagon is drawn

(3) The third step is to draw the right div and its pseudo-element image

The principle of this step is the same as the second one The same part, but the angle is reversed, so I won’t go into details. Just upload the complete code

. At this point, you can show the picture at the beginning of the article. Using this principle, you can also make various other The picture display effect of the shape. You are welcome to continue to study. In the future, the picture display will no longer be a single brick!

I believe you have mastered the method, please pay attention to the php Chinese website for more exciting information. Other related articles!

Related reading:

How to increase user experience in HTML5 drop-down box

##Using H5’s WebGL How to make json and echarts charts in the same interface

How to use the new semantic tag feature of H5

The above is the detailed content of How to make a hexagonal picture in css. For more information, please follow other related articles on the PHP Chinese website!