Implementation of hexagon in css3

Recent projects have encountered responsive projects that require hexagon. The traditional way makes me think of cutting pictures, but the pictures are not conducive to mouse interaction; css3 makes me think of a new way, let's share the development experience below

Specific effect:

Implementation principle:
The main css styles of this effect are:
1. > Transform: rotate (120Deg); picture rotation
2. > overflow: hidden
3. > visibility: hidden; is also hidden, similar to display:none; but different from that, although it is hidden, it still occupies a place in the web page

We need to use the 3-layer div to rotate to get this effect (PS: the size of the 3-layer div is the same).
The outermost div(boxF) rotates 120 degrees. The second layer (boxS) rotates - 60 degrees, and the third layer (boxT) rotates - 60 degrees, which just returns to normal. Our image is placed in the div background of the third layer. Because there is nothing in the first two layers of divs, it is purely used to rotate to get the 6-sided shape, so the visibility: hidden is set for the 1-layer and 2-layer divs; and the visibility: visible is set for the 3-layer divs, which needs to be displayed; PS: if you do not set the visibility: visible for the 3-layer divs, it will inherit the visibility: hidden of the 2-layer divs by default;
After rotation, there must be excess parts, so overflow:hidden; is set for all three div s.)

After rotating and hiding the part beyond, we can get the 6-sided shape we want. It should also be noted that the ratio of the width to height of the div must meet 4:5, otherwise the result is not a 6-sided shape.

The DEMO code is as follows:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS3 Achieve hexagon picture display effect</title>
    <style type="text/css">
        body, div, img, ul, li
        {
            margin: 0;
            padding: 0;
        }
        body
        {
            font-size: 12px;
            background-color: #DDD;
            min-width: 1200px;
        }
        ul, ul li
        {
            list-style: none;
        }

        .boxF, .boxS, .boxT, .overlay
        {
            width: 200px;
            height: 250px;
            overflow: hidden;
        }
        .boxF, .boxS
        {
            visibility: hidden;
        }
        .boxF
        {
            transform: rotate(120deg);
            float: left;
            margin-left: 10px;
            -ms-transform: rotate(120deg);
            -moz-transform: rotate(120deg);
            -webkit-transform: rotate(120deg);
        }
        .boxS
        {
            transform: rotate(-60deg);
            -ms-transform: rotate(-60deg);
            -moz-transform: rotate(-60deg);
            -webkit-transform: rotate(-60deg);
        }
        .boxT
        {
            transform: rotate(-60deg);
            background: no-repeat 50% center;
            background-size: 125% auto;
            -ms-transform: rotate(-60deg);
            -moz-transform: rotate(-60deg);
            -webkit-transform: rotate(-60deg);
            visibility: visible;
        }
    </style>
</head>
<body>
<div class="boxF">
    <div class="boxS">
        <div class="boxT" style="background-image: url(http://b.hiphotos.baidu.com/image/pic/item/10dfa9ec8a1363272bc51737938fa0ec08fac78e.jpg);"></div>
    </div>
</div>
</body>
</html>

Tags: css3

Posted on Thu, 26 Mar 2020 09:31:18 -0700 by mikeatrpi