div+css3绘制六边形

最新推荐文章于 2024-04-12 09:00:00 发布

qq_25462315

最新推荐文章于 2024-04-12 09:00:00 发布

阅读量1k

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/qq_25462315/article/details/85232563

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

效果图如下：
在这里插入图片描述

代码实现如下：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS3 实现六边形图片展示效果</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;
        }
        .clear
        {
            clear: both;
        }       
        .box
        {
            position: relative;
            width: 630px;
            margin: 100px auto;
        }
        .box-top, .box-bottom
        {
            position: absolute;
            visibility: hidden;
        }
        .box-bottom
        {
            top: 182px;
            left: 105px;
        }
        .box1, .box2, .box3, .box4
        {
            width: 200px;
            height: 250px;
            overflow: hidden;
        }
        .box1, .box2
        {
            visibility: hidden;
        }
        .box1
        {
            transform: rotate(120deg);
            float: left;
            margin-left: 10px;
            -ms-transform: rotate(120deg);
            -moz-transform: rotate(120deg);
            -webkit-transform: rotate(120deg);
        }
        .box2
        {
            transform: rotate(-60deg);
            -ms-transform: rotate(-60deg);
            -moz-transform: rotate(-60deg);
            -webkit-transform: rotate(-60deg);
        }
        .box3
        {
            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;
            background: pink;
            box-shadow: #BF0060 2px 15px 75px 7px inset;
        }
        .box4
        {
            display: block;
            position: relative;
        }
        .box4 a
        {
            display: inline-block;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -16px 0 0 -16px;
            border-radius: 3px;
            text-align: center;
            line-height: 32px;
            width: 32px;
            height: 32px;
            text-decoration: none;
            color: White;
            font-size: 18px;
            font-weight: bolder;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box-top">
            <div class="box1">
                <div class="box2">
                    <div class="box3">
                        <div class="box4">
                            <a href="#">+</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="box1">
                <div class="box2">
                    <div class="box3">
                        <div class="box4">
                            <a href="#">+</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="box1">
                <div class="box2">
                    <div class="box3">
                        <div class="box4">
                            <a href="#">+</a>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="box-bottom">
            <div class="box1">
                <div class="box2">
                    <div class="box3">
                        <div class="box4">
                            <a href="#">+</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="box1">
                <div class="box2">
                    <div class="box3">
                        <div class="box4">
                            <a href="#">+</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>
</html>

qq_25462315

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
div+css3绘制六边形

效果图如下：代码实现如下：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;CSS3 实现六边形图片展示效果&lt;/title&
复制链接

扫一扫