如何从具有角度材质的按钮触发select？

<button class="angled-button">按钮</button>

<style>
.angled-button {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  transition-duration: 0.4s;
  cursor: pointer;
  border-radius: 8px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
  transform: skew(-10deg);
}

.angled-button:hover {
  background-color: #45a049;
}
</style>

<button class="angled-button" onclick="showSelect()">按钮</button>
<select id="mySelect" style="display: none;">
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
</select>

<script>
function showSelect() {
  var select = document.getElementById("mySelect");
  if (select.style.display === "none") {
    select.style.display = "block";
  } else {
    select.style.display = "none";
  }
}
</script>

<button class="angled-button" onclick="toggleSelect()">按钮</button>
<select id="mySelect" style="display: none;">
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
</select>

<script>
document.addEventListener("click", function(event) {
  var select = document.getElementById("mySelect");
  var button = document.querySelector(".angled-button");
  if (event.target !== select && event.target !== button) {
    select.style.display = "none";
  }
});

function toggleSelect() {
  var select = document.getElementById("mySelect");
  if (select.style.display === "none") {
    select.style.display = "block";
  } else {
    select.style.display = "none";
  }
}
</script>