How to set the image to hexagon in css-CSS Tutorial-php.cn

How to set the image to hexagon in css

藏色散人

Release： 2023-01-03 09:26:04

Original

4369 people have browsed it

How to set a hexagonal image in css: first create an HTML sample file; then introduce the image into the body; finally implement the image through css styles such as "transform: rotate(120deg);overflow: hidden;" Just be hexagonal.

How to set the image to hexagon in css

The operating environment of this tutorial: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.

CSS3 to achieve hexagonal Div image display effect

1. Effect picture

##2. Principle explanation

The main knowledge points used for this effect:

1. transform: rotate(120deg); Image rotation

2. overflow: hidden; Beyond hiding

　3. visibility: hidden; is also hidden, similar to display:none;, but the difference is that although it is hidden, it will still occupy a position in the web page

We need to use 3 layers of p. Rotate to get this effect (note: the size of the 3 layers of p is the same). The outermost layer p (boxF) is rotated 120 degrees, the second layer (boxS) is rotated -60 degrees, and the third layer (boxT) is rotated another -60 degrees, which is just back to normal. Our image is placed in the p background of layer 3. Because there is nothing in the first two layers p, they are purely used to rotate to obtain a hexagon, so set visibility: hidden for the 1st and 2nd layers p; and the third layer p is for pictures and needs to be displayed, so set visibility: visible; (Note: If you do not set visibility: visible; on the third layer p, it will inherit the visibility: hidden; of the second layer p(boxS) by default). There will definitely be excess parts after rotation, so set overflow:hidden;

for all three ps. After rotation and hiding the excess parts, we can get the hexagon we want. Another thing to note is that the width-to-height ratio of p must meet 4:5, otherwise the result will not be a hexagon. In the effect picture above. We also placed a p (overlay) in the third layer (boxT). This p is used for masking. When the mouse moves over the 6-sided shape, there will be a masking effect. There is an a tag inside p(overlay), which is a number. Clicking the a tag will pop up the layer and display the large image (note: this js effect has not been written yet).

3. The DEMO code of the above renderings [Recommended: "

css Video Tutorial"]

<!DOCTYPE html><html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS3 实现六边形图片展示效果</title>
    <style type="text/css">
        body, p, img, ul, li        {
            margin: 0;
            padding: 0;
        }
        body        {
            font-size: 12px;
            background-color: #DDD;
            min-width: 1200px;
        }
        ul, ul li        {
            list-style: none;
        }
        .clear        {
            clear: both;
        }       
        .box        {
            position: relative;
            width: 630px;
            margin: 100px auto;
        }
        .lineF, .lineS        {
            position: absolute;
            visibility: hidden;
        }
        .lineS        {
            top: 182px;
            left: 105px;
        }
        .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;
        }
        .overlay        {
            transition: all 250ms ease-in-out 0s;
            display: none;
            position: relative;
        }
        .overlay:hover        {
            background-color: rgba(0,0,0,0.6);
        }
        .boxT:hover .overlay        {
            display: block;
        }
        .overlay a        {
            display: inline-block;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -16px 0 0 -16px;
            border-radius: 3px;
            background-color: #d3b850;
            text-align: center;
            line-height: 32px;
            width: 32px;
            height: 32px;
            text-decoration: none;
            color: White;
            font-size: 18px;
            font-weight: bolder;
        }
    </style></head><body>
    <p class="box">
        <!--第一行(lineFirst)-->
        <p class="lineF">
            <p class="boxF">
                <p class="boxS">
                    <p class="boxT" style="background-image: url(img/1.jpg);">
                        <p class="overlay">
                            <a href="#">+</a>
                        </p>
                    </p>
                </p>
            </p>
            <p class="boxF">
                <p class="boxS">
                    <p class="boxT" style="background-image: url(img/2.jpg);">
                        <p class="overlay">
                            <a href="#">+</a>
                        </p>
                    </p>
                </p>
            </p>
            <p class="boxF">
                <p class="boxS">
                    <p class="boxT" style="background-image: url(img/3.jpg);">
                        <p class="overlay">
                            <a href="#">+</a>
                        </p>
                    </p>
                </p>
            </p>

        </p>
        <!--第二行(lineSecond)-->
        <p class="lineS">
            <p class="boxF">
                <p class="boxS">
                    <p class="boxT" style="background-image: url(img/4.jpg);">
                        <p class="overlay">
                            <a href="#">+</a>
                        </p>
                    </p>
                </p>
            </p>
            <p class="boxF">
                <p class="boxS">
                    <p class="boxT" style="background-image: url(img/5.jpg);">
                        <p class="overlay">
                            <a href="#">+</a>
                        </p>
                    </p>
                </p>
            </p>
        </p>
    </p></body></html>

Copy after login

-- If you want to see the effect, just copy the DEMO code directly. Of course, you have to add the picture yourself, and versions below IE9 do not support it.

The above is the detailed content of How to set the image to hexagon in css. For more information, please follow other related articles on the PHP Chinese website!