console 命令行工具 X clear

console

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>实现正六边形</title>
</head>

<body>
    <section class="f1-container">
        <div class="container">
            <div class="box"></div>
        </div>
    </section>

    <section class="f2-container">
        <div class="container">
            <div class="box box1"></div>
            <div class="box box2"></div>
            <div class="box box3"></div>
        </div>
    </section>

    <section class="f3-container">
        <div class="container">
            <div class="box box"></div>
        </div>
    </section>
</body>
</html>

/* * {
    box-sizing: border-box;
} */
/* *::after {
    box-sizing: border-box;
} */
.container {
    width: 400px;
    height: 300px;
    margin: 10px auto;
    background: goldenrod;
    border-radius: 5px;   
}
.box {
    position: relative;
    width: 50px;
    height: 86.6px;
    background: pink;
}
.f1-container .container {
    display: flex;
}
.f1-container .box {
    margin: auto;
}
.f1-container .box::after {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    left:50px;
    top:0;
    border-width: 43.3px 25px;
    border-style: solid;
    border-color: transparent transparent transparent pink;
}

.f1-container .box::before {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    right:50px;
    top:0;
    border-width: 43.3px 25px;
    border-style: solid;
    border-color: transparent pink transparent transparent;
}


.f2-container .container {
    position: relative;
}
.f2-container .box {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
}

.f2-container .box2 {
    transform: rotate(60deg);
}

.f2-container .box3 {
    transform: rotate(-60deg);
}

.f3-container .container {
    position: relative;
}

.f3-container .box {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;
    right: 0px;
    bottom: 0px;
    margin: auto;
}

.f3-container .box::after {
    content: '';
    display: block;
    position: absolute;
    z-index: 10;
    width: 50px;
    height: 86.6px;
    background: pink;
    transform: rotate(60deg);
}

.f3-container .box::before {
    content: '';
    display: block;
    position: absolute;
    z-index: 10;
    width: 50px;
    height: 86.6px;
    background: pink;
    transform: rotate(-60deg);
}