如何在一个网格中添加多个自定义形状的按钮？

<div class="grid-container">
  <button id="btn1" class="circle-button">Button 1</button>
  <button id="btn2" class="square-button">Button 2</button>
  <button id="btn3" class="triangle-button">Button 3</button>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
}

.circle-button {
  background-color: #ff0000;
  border-radius: 50%;
  padding: 10px;
  font-size: 16px;
}

.square-button {
  background-color: #00ff00;
  border: 1px solid #000000;
  padding: 10px;
  font-size: 16px;
}

.triangle-button {
  background-color: #0000ff;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #0000ff;
  padding: 10px;
  font-size: 16px;
}

document.getElementById("btn1").addEventListener("click", function() {
  // 按钮1的点击事件处理程序
  console.log("Button 1 clicked");
});

document.getElementById("btn2").addEventListener("click", function() {
  // 按钮2的点击事件处理程序
  console.log("Button 2 clicked");
});

document.getElementById("btn3").addEventListener("click", function() {
  // 按钮3的点击事件处理程序
  console.log("Button 3 clicked");
});