將8個按鈕放置成八角形-有解無憂

我想在里面添加 8 個按鈕#board，每個按鈕都放在八角形的一個點上（即 a background-image）。有任何想法嗎？

#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>

uj5u.com熱心網友回復：

您可以通過 8 個 div 根據八角形的實際幾何形狀準確地做到這一點。每個八邊形對角線高度的一半，頂部有一個按鈕。

每個都位于八邊形的中心，頂部并旋轉了相關的 45 度數。

這是使用您的影像的示例。

.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 class="container">
  <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>

由于影像不準確，我對將按鈕放在該影像上有點不舒服。如果可能的話，我會使用 HTML/CSS 而不是使用影像來繪制八邊形。

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/517449.html

標籤：htmlcss按钮形状

上一篇：修改類屬性javascriptCSSHTML

下一篇：如何在更改時使文本淡出和新文本淡入