SOURCE

console 命令行工具 X clear 

                    

                        
>

                        
                    

                

            

            
console

            
<body>
    <div>
        <div class="hexagon">
            <div class="bar-rotate-left">
                <div class="bar-rotate-right">
                    <div class="bar-horizontal"></div>
                </div>
            </div>
        </div>
        <div class="hexagon">
            <div class="bar-rotate-left">
                <div class="bar-rotate-right">
                    <div class="bar-horizontal"></div>
                </div>
            </div>
        </div>
        <div class="hexagon">
            <div class="bar-rotate-left">
                <div class="bar-rotate-right">
                    <div class="bar-horizontal"></div>
                </div>
            </div>
        </div>
    </div>
    <div style="transform: translate(-102px, -58.75px)">
        <div class="hexagon">
            <div class="bar-rotate-left">
                <div class="bar-rotate-right">
                    <div class="bar-horizontal"></div>
                </div>
            </div>
        </div>
        <div class="hexagon">
            <div class="bar-rotate-left">
                <div class="bar-rotate-right">
                    <div class="bar-horizontal"></div>
                </div>
            </div>
        </div>
        <div class="hexagon">
            <div class="bar-rotate-left">
                <div class="bar-rotate-right">
                    <div class="bar-horizontal"></div>
                </div>
            </div>
        </div>
        <div class="hexagon">
            <div class="bar-rotate-left">
                <div class="bar-rotate-right">
                    <div class="bar-horizontal"></div>
                </div>
            </div>
        </div>
    </div>
    <div style="transform: translate(0, -117.5px)">
        <div class="hexagon">
            <div class="bar-rotate-left">
                <div class="bar-rotate-right">
                    <div class="bar-horizontal"></div>
                </div>
            </div>
        </div>
        <div class="hexagon">
            <div class="bar-rotate-left">
                <div class="bar-rotate-right">
                    <div class="bar-horizontal"></div>
                </div>
            </div>
        </div>
        <div class="hexagon">
            <div class="bar-rotate-left">
                <div class="bar-rotate-right">
                    <div class="bar-horizontal"></div>
                </div>
            </div>
        </div>
    </div>
</body>

            
body {
    min-width: 1000px;
    margin: 50px 150px;
    background: pink;
}

.hexagon {
    display: inline-block;
}

.hexagon .bar-rotate-left {
    width: 200px;
    height: 231px;
    overflow: hidden;
    transform: rotate(60deg);
    display: inline-block;
}

.hexagon .bar-rotate-right {
    width: 200px;
    height: 231px;
    overflow: hidden;
    transform: rotate(60deg);
    display: inline-block;
}

.hexagon .bar-horizontal {
    width: 200px;
    height: 232px;
    background: #FFFFFF;
    transform: rotate(-120deg);
    display: flex;
    justify-content: center;
    align-items: center;
}

.hexagon .bar-horizontal:hover {
    background: #F0F0F0;
}