HTML+CSS手写科技感六边形

最新推荐文章于 2023-06-21 15:43:13 发布

cautionHua

最新推荐文章于 2023-06-21 15:43:13 发布

阅读量1k

点赞数 1

分类专栏： html 文章标签： css html css3

本文链接：https://blog.csdn.net/cautionHua/article/details/121978658

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

最近有个需求需要实现一堆这种五颜六色的六边形作为气泡容器，于是就参考网上的思路写了一个这样的六边形。
效果图如下：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        body {
            background-color: black;
        }

        .rect_container_qipao {
            margin: 50px auto;
            transform: rotateZ(270deg);
        }

        .rect_container_qipao,
        .h_c_rect_container,
        .h_c_rect_c_middler,
        .h_c_rect_c_item,
        .border_six_one,
        .border_six_two {
            width: 250px;
            height: 200px;
        }

        .h_c_rect_container,
        .h_c_rect_c_middler,
        .h_c_rect_c_item {
            overflow: hidden;
        }

        /* 这里的高度需要降低一些，让边框可以看到 */
        .border_six_one,
        .border_six_two {
            height: 198px;
        }

        .h_c_rect_container,
        .h_c_rect_c_middler {
            visibility: hidden;
        }

        .rect_container_qipao .h_c_rect_container {
            margin-left: 10px;
            float: left;
            transform: rotate(120deg);
        }

        .h_c_rect_container .h_c_rect_c_middler {
            transform: rotate(-60deg);
        }

        .h_c_rect_c_item,
        .border_six_one,
        .border_six_two {
            box-shadow: 0px 0px 17px 2px rgba(51, 238, 63, 0.6) inset;
            border: 1px solid rgba(51, 238, 63, 1);
        }

        .h_c_rect_c_item {
            position: relative;
            transform: rotate(-60deg);
            background: no-repeat 50% center;
            background-size: 125% auto;
            visibility: visible;
        }

        .border_six_one {
            position: absolute;
            left: 0;
            top: 0;
            transform: rotateZ(60deg);
        }

        .border_six_two {
            position: absolute;
            left: 0;
            top: -3px;
            transform: rotateZ(120deg);
        }

        .rect_text {
            display: flex;
            flex-direction: column;
            position: absolute;
            left: -20%;
            top: -14%;
            width: 200px;
            height: 250px;
            transform: rotateZ(90deg);
            color: #fff;
            text-align: center;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <div class="rect_container_qipao">
        <div class="h_c_rect_container">
            <div class="h_c_rect_c_middler">
                <div class="h_c_rect_c_item">
                    <div class="border_six_one"></div>
                    <div class="border_six_two"></div>
                    <div class="rect_text">
                        <!-- 展示的内容 -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

cautionHua

关注

1
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS手写科技感六边形

最近有个需求需要实现一堆这种五颜六色的六边形作为气泡容器，于是就参考网上的思路写了一个这样的六边形。效果图如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wid
复制链接

扫一扫