Css Implementation of hexagonal images (the simplest and easier-to-understand method to achieve high-force lattice Image Display), css hexagonal
If you don't want to mention anything else, you should first perform the following operations:
Use a simple div with a pseudo element to draw a hexagonal image. The principle is that three divs with the same width and height are combined into a hexagonal image by positioning and rotating, And Then stacked with the background image, form a visual integer. Next we will implement it step by step.
(1) So the first step is to draw the container. The container is a div with a wide height.Before drawing, you must understand the problem, that is, the Equi-side hexagonal is combined by three divs with the same width and height (as shown in ), therefore, the div width and height must meet the √ 3 times to form a positive hexagonal. We will not calculate this value here. If you are interested, you can use the trigonometric function to calculate it yourself.
Here, I set the outer container width to pixel PX, the height to 110px, and then set the background image. The Code is as follows:
<!DOCTYPE html>The effect is a picture.
(2) Step 2: Draw the Left div and its pseudo element image
In this step, the new div is used to locate the left side of the rotation and splice the hexagonal, set the width and height for the pseudo elements of the new div, and set the consistent background image, note that the width and height of the new div pseudo element are the width and height of the entire hexagonal. Then rotate the pseudo element to display the image vertically (the new div should be rotated, so the pseudo element image is also rotated, so it needs to be rotated back to the normal angle) in addition, you need to adjust the position of the pseudo element (the new div is rotated, which affects the position of the pseudo element). Finally, you can set the new div to be hidden, and the left side of the hexagonal is drawn.
1 <!DOCTYPE html> 2The effect is as follows:
(3) Step 3: draw the right div and its pseudo element image
This step is the same as that of the second part, but the angle is the opposite.
<!DOCTYPE html>At this point, we will be able to show the first image of the Article. Using this principle, we can also make other image display effects in various shapes. You are welcome to continue your research. In the future, image display is no longer a single brick line !!
Reprinted with the source. Thank you.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
