How to make a hexagonal picture in css-CSS Tutorial-php.cn

How to make a hexagonal picture in css

php中世界最好的语言

Release： 2018-01-30 10:31:24

Original

2421 people have browsed it

This time I will show you how to make a hexagonal picture with css. What are the precautions 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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    .wrap{
        height:110px;
        width: 190px;
        position: relative;
        margin: 200px auto;
        background: url(&#39;./eddie.jpg&#39;) 50% 50% no-repeat;
        background-size: auto 220px;
    }
</style>
<body>
    <div class=&#39;wrap&#39;>
    </div>
</body>
</html>

Copy after login

(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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    .wrap{
        height:110px;
        width: 190px;
        position: relative;
        margin: 200px auto;
        background: url(&#39;./eddie.jpg&#39;) 50% 50% no-repeat;
        background-size: auto 220px;
    }
    .common{
        position: absolute;
        height: 100%;
        width: 100%;
        overflow: hidden;
        left:0;
23
    }
    .common:before{
        content:&#39;&#39;;
        position: absolute;
        background:url(&#39;./eddie.jpg&#39;) 50% 50% no-repeat;
        background-size: auto 220px;
        width: 190px;
        height: 220px;
    }
    .left{
        transform: rotate(60deg);
    }
    .left:before{
        transform: rotate(-60deg) translate(48px,-28px);
    }
</style>
<body>
    <div class=&#39;wrap&#39;>
        <div class=&#39;left common&#39;></div>
     
    </div>
</body>
</html>

Copy after login

(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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    .wrap{
        height:110px;
        width: 190px;
        position: relative;
        margin: 200px auto;
        background: url(&#39;./eddie.jpg&#39;) 50% 50% no-repeat;
        background-size: auto 220px;
    }
    .common{
        position: absolute;
        height: 100%;
        width: 100%;
        overflow: hidden;
        left:0;
 
    }
    .common:before{
        content:&#39;&#39;;
        position: absolute;
        background:url(&#39;./eddie.jpg&#39;) 50% 50% no-repeat;
        background-size: auto 220px;
        width: 190px;
        height: 220px;
    }
    .left{
        transform: rotate(60deg);
    }
    .left:before{
        transform: rotate(-60deg) translate(48px,-28px);
    }
    .right{
        transform: rotate(-60deg);
    }
    .right:before{
         transform: rotate(60deg) translate(48px,28px);
         bottom: 0;
    }
</style>
<body>
    <div class=&#39;wrap&#39;>
        <div class=&#39;left common&#39;></div>
        <div class=&#39;right common&#39;></div>
    </div>
</body>
</html>

Copy after login

. 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!