CSS to make a picture background filled hexagon

This time to bring you CSS to make a picture of the background of the hexagon, CSS to make a picture of the background of the hexagon to fill the attention of the matter, the following is the actual case, together to see.

The hexagonal implementation principle is actually achieved by rotating three overlapping rectangles, as shown in:

Here in order to get a positive hexagon, two rectangles must be rotated at an angle of -60deg and 60deg, and the rectangular aspect ratio must be MATH.SQRT (3): 1

So first we're going to create a three rectangle:

    <p class= "Hexagon" >        <p class= "Hexagonitem hexagonitem_left" ></p>        <p class= " Hexagonitem hexagonitem_center "></p>        <p class=" Hexagonitem hexagonitem_right "></p>    </p>

We set the width height of the three rectangles to 60px and 104px respectively, the background color is blue, and the. Hexagonitem_left rotation -60deg,.hexagonitem_right rotation 60deg,.hexagonitem_center does not rotate.

      . 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);        }

This makes it easy to get a positive hexagon.

So how can we make the blue background into a picture, in fact, it is very simple, the above three rectangles actually just play a role in shaping, in fact, should be set to Visibility:hidden, we need to give three rectangles to add a rectangular sub-element and set to Visibility:visible.

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

Do the code below, you can do a good study

<! DOCTYPE html>
Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

How CSS quirks box models and standard box models are used

CSS for accordion layout