search

Home >Web Front-end >CSS Tutorial >How to set the image to hexagon in css

How to set the image to hexagon in css

藏色散人
藏色散人Original
2021-02-28 14:43:304267browse

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

html5 css css3 html 继承 JS display overflow transform
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to set triangle in cssNext article：How to set triangle in css

Related articles

See more