如何在#board容器的八边形背景点位上放置8个按钮？

方法一：绝对定位 + 精准坐标计算 #

这是最直接的方案，靠绝对定位把按钮固定在对应圆点位置：

1. 给#board添加position: relative，作为绝对定位元素的参考容器
2. 给每个按钮设置position: absolute，结合正八边形顶点的相对坐标计算top和left值（适配300x300的容器尺寸）
3. 用transform: translate(-50%, -50%)让按钮中心对准圆点（因为绝对定位默认以元素左上角为基准点）

代码示例：

#board {
    /* 保留原有样式，新增 */
    position: relative;
}

.board-btn {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    transform: translate(-50%, -50%);
}

/* 八个按钮的精准位置（基于正八边形三角函数计算） */
.btn-1 { top: 0; left: 50%; }
.btn-2 { top: 29.29%; left: 92.39%; }
.btn-3 { top: 70.71%; left: 92.39%; }
.btn-4 { top: 100%; left: 50%; }
.btn-5 { top: 70.71%; left: 7.61%; }
.btn-6 { top: 29.29%; left: 7.61%; }
.btn-7 { top: 50%; left: 0; }
.btn-8 { top: 50%; left: 100%; }

HTML：

<div id="layout_flexbox">
    <div id="board">
        <button class="board-btn btn-1"></button>
        <button class="board-btn btn-2"></button>
        <button class="board-btn btn-3"></button>
        <button class="board-btn btn-4"></button>
        <button class="board-btn btn-5"></button>
        <button class="board-btn btn-6"></button>
        <button class="board-btn btn-7"></button>
        <button class="board-btn btn-8"></button>
    </div>
</div>

方法二：CSS Transform 旋转复制 #

利用正八边形的8重对称性，只需要定位一个按钮，其余通过旋转生成，代码更简洁：

1. 给#board设置position: relative，可选加overflow: hidden防止按钮旋转后超出容器
2. 创建一个中心定位的容器包裹所有按钮，通过旋转每个按钮的位置来对齐顶点
3. 用transform: rotate(N*45deg) translate(0, -130px) rotate(-N*45deg)实现定位（130px是容器中心到顶点的距离，可根据需求调整）

代码示例：

#board {
    /* 保留原有样式，新增 */
    position: relative;
    overflow: hidden;
}

.btn-container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
}

.board-btn {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    left: -15px; /* 偏移按钮宽度一半，让中心对准旋转点 */
    top: -15px;
}

.btn-1 { transform: rotate(0deg) translate(0, -130px) rotate(0deg); }
.btn-2 { transform: rotate(45deg) translate(0, -130px) rotate(-45deg); }
.btn-3 { transform: rotate(90deg) translate(0, -130px) rotate(-90deg); }
.btn-4 { transform: rotate(135deg) translate(0, -130px) rotate(-135deg); }
.btn-5 { transform: rotate(180deg) translate(0, -130px) rotate(-180deg); }
.btn-6 { transform: rotate(225deg) translate(0, -130px) rotate(-225deg); }
.btn-7 { transform: rotate(270deg) translate(0, -130px) rotate(-270deg); }
.btn-8 { transform: rotate(315deg) translate(0, -130px) rotate(-315deg); }

HTML：

<div id="layout_flexbox">
    <div id="board">
        <div class="btn-container">
            <button class="board-btn btn-1"></button>
            <button class="board-btn btn-2"></button>
            <button class="board-btn btn-3"></button>
            <button class="board-btn btn-4"></button>
            <button class="board-btn btn-5"></button>
            <button class="board-btn btn-6"></button>
            <button class="board-btn btn-7"></button>
            <button class="board-btn btn-8"></button>
        </div>
    </div>
</div>

方法三：CSS Grid 布局定位 #

通过网格线的精准配置，把按钮锚定到对应网格区域：

1. 把#board的flex布局替换为display: grid，设置3列3行的网格（中间行列对应容器中心，其余对应顶点区域）
2. 用grid-column/grid-row配合justify-self/align-self调整按钮位置，精准对齐背景圆点

代码示例：

#board {
    /* 替换原有flex样式，新增grid配置 */
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    position: relative;
    width: 300px;
    height: 300px;
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/c/c6/Octagon_r16_symmetry.png');
    background-size: 300px 300px;
    background-repeat: no-repeat;
    background-position: center;
}

.board-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
}

/* 定位每个按钮到对应顶点 */
.btn-1 { grid-column: 2; grid-row: 1; justify-self: center; }
.btn-2 { grid-column: 3; grid-row: 1; justify-self: start; align-self: end; }
.btn-3 { grid-column: 3; grid-row: 3; justify-self: start; align-self: start; }
.btn-4 { grid-column: 2; grid-row: 3; justify-self: center; }
.btn-5 { grid-column: 1; grid-row: 3; justify-self: end; align-self: start; }
.btn-6 { grid-column: 1; grid-row: 1; justify-self: end; align-self: end; }
.btn-7 { grid-column: 1; grid-row: 2; justify-self: end; align-self: center; }
.btn-8 { grid-column: 3; grid-row: 2; justify-self: start; align-self: center; }

HTML和方法一一致，直接在#board内添加8个带类名的按钮即可。

内容的提问来源于stack exchange，提问作者Theodore K.