CSS to create a hexagon filled image background

This time I will bring you CSS to make hexagons filled with image backgrounds, and CSS to make hexagons filled with image backgrounds. What are the precautions?. Here are practical cases. Let’s take a look. one time.

The implementation principle of hexagon is actually obtained by rotating three overlapping rectangles, as shown in the following figure:

In order to obtain a positive hexagon, two rectangles are rotated The angle must be -60deg and 60deg, and the rectangle aspect ratio must be Math.sqrt(3): 1

So first we have to create three rectangles:

    <p class="hexagon">
        <p class="hexagonitem hexagonitem_left"></p>
        <p class="hexagonitem hexagonitem_center"></p>
        <p class="hexagonitem hexagonitem_right"></p>
    </p>

We set three The width and height of the rectangle are 60px and 104px respectively, the background color is blue, .hexagonitem_left is rotated by -60deg, .hexagonitem_right is rotated by 60deg, and .hexagonitem_center is not rotated.

      .hexagon {
            width: 60px;
            height: 104px;
            position: relative;
            margin: 200px auto;
        }
        .hexagonitem {
            width: 100%;
            height: 100%;
            background: blue;
            position: absolute;
            top: 0;
            left: 0;
        }
        .hexagonitem_left {
            transform: rotate(-60deg);
        }
        .hexagonitem_right {
            transform: rotate(60deg);
        }

In this way, we simply get a regular hexagon.

So how can we make the blue background turn into a picture? It is actually very simple. The above three rectangles actually only play a shaping role. In fact, they should be set to visibility : hidden, we need to add a rectangular child element to each of the three rectangles and set it to visibility: visible.

The width and height of the three sub-elements need to just cover the previous blue hexagon.

The code is as follows, you can study it carefully

    
    
    
    
    


    <p class="hexagon">
        <p class="hexagonitem hexagonitem_left"></p>
        <p class="hexagonitem hexagonitem_center"></p>
        <p class="hexagonitem hexagonitem_right"></p>
    </p>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

CSS weird box model and standard box model How to use

CSS to implement accordion layout

The above is the detailed content of CSS to create a hexagon filled image background. For more information, please follow other related articles on the PHP Chinese website!