Position 8 buttons in octagon shape-CodePudding

I want to add 8 buttons inside #board and each button to be placed over a dot of the octagon (which is a background-image). Any ideas?

#layout_flexbox{
    -webkit-box-direction: normal;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
}

#board {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/c/c6/Octagon_r16_symmetry.png'); 
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: center;

    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: var(--gutter);
    text-align: center;

    width: 300px;
    height: 300px;
    background-size: 300px 300px;
    background-repeat: no-repeat;
    flex-grow: 1;
    background-position: center;
}

<div id="layout_flexbox">
    <div id="board">
    </div>
</div>

CodePudding user response：

You can do this accurately in terms of the actual geometry of an octagon by having 8 divs. Each half the height of the diagonal of the octagon and with a button at the top.

Each is positioned in the center, top of the octagon and rotated the relevant number of 45 degrees.

Here's an example using your image.

.container {
  width: fit-content;
  height: fit-content;
  position: relative;
}

.container div {
  position: absolute;
  width: fit-content;
  height: 50%;
  left: 50%;
  transform-origin: center bottom;
  transform: translateX(-50%) rotate(calc((var(--n) - 1) * 45deg));
}

.container div:nth-child(1) {
  --n: 1;
}

.container div:nth-child(2) {
  --n: 2;
}

.container div:nth-child(3) {
  --n: 3;
}

.container div:nth-child(4) {
  --n: 4;
}

.container div:nth-child(5) {
  --n: 5;
}

.container div:nth-child(6) {
  --n: 6;
}

.container div:nth-child(7) {
  --n: 7;
}

.container div:nth-child(8) {
  --n: 8;
}

.container div button {
  height: 20%;
}

<div >
  <div><button>Button1</button></div>
  <div><button>Button2</button></div>
  <div><button>Button3</button></div>
  <div><button>Button4</button></div>
  <div><button>Button5</button></div>
  <div><button>Button6</button></div>
  <div><button>Button7</button></div>
  <div><button>Button8</button></div>
  <img src="https://upload.wikimedia.org/wikipedia/commons/c/c6/Octagon_r16_symmetry.png">
</div>

I am a little uncomfortable with putting the buttons over that image as the image is not accurate. If possible I would draw the octagon using HTML/CSS rather than use an image.