欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

css 怎么设置图片为六边形

程序员文章站 2022-03-08 12:01:46
...

css设置图片为六边形的方法:首先创建一个HTML示例文件;然后在body中引入图片;最后通过“transform: rotate(120deg);overflow: hidden;”等css样式实现图片为六边形即可。

css 怎么设置图片为六边形

本教程操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。

CSS3 实现六边形Div图片展示效果

一. 效果图

css 怎么设置图片为六边形

二. 原理讲解

这个效果用到的主要知识点 :

  1. transform: rotate(120deg); 图片旋转

  2. overflow: hidden; 超出隐藏

  3. visibility: hidden; 也是隐藏,与 display:none; 相似,但不同的是,它虽然隐藏了,但依然会在网页中占有位置

  我们要用到3层p进行旋转来得到这个效果(注: 3层 p 的大小是一样的)。最外层 p(boxF) 旋转120度,第二层 (boxS) 旋转-60度,第三层 (boxT) 再旋转-60度,此时刚好回正。我们的图片就放在第3层的 p 背景中。因为前两层 p 中没有东西,纯粹就是用来旋转得到6边形的,所以对1,2层 p 设置 visibility: hidden; 而第3层 p 是放图片的,需要显示出来,因此设置 visibility: visible; (注: 如果你不对第3层 p 设置 visibility: visible; 那它默认就会继承第二层 p(boxS) 的 visibility: hidden; )。经过旋转肯定有超出的部分,因此对3个p都设置 overflow:hidden;

  经过旋转和对超出部分的隐藏我们就可以得到我们想要的6边形了。还有一点要注意,那就是p的宽高比例必须满足4:5,不然得到的就不是6边形了。在上面的效果图片中。我们在第三层 (boxT) 里面还放置了一个 p(overlay),这个 p 是用于遮罩的,当鼠标移到6边形上时,会有遮罩效果。在 p(overlay) 里面有个a标签,里面是个 + 号,点击 a 标签则弹出层,显示大图(注: 这个 js 效果暂时没写)。

三. 上面效果图的DEMO代码【推荐:《css视频教程》】

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

-- 想看效果,直接将DEMO代码复制就行了,当然,图片得你自己加了,IE9以下版本不支持。

以上就是css 怎么设置图片为六边形的详细内容,更多请关注其它相关文章!

相关标签: css