如何仅使用CSS来设计"D-PAD“控制器的样式，使其看起来像这样？

<div class="d-pad-container">
  <!-- 控制器的各个部分 -->
</div>

.d-pad-container {
  width: 200px;
  height: 200px;
  background-color: #ccc;
  position: relative;
}

<div class="d-pad-container">
  <div class="button up"></div>
  <div class="button down"></div>
  <div class="button left"></div>
  <div class="button right"></div>
</div>

.button {
  width: 50px;
  height: 50px;
  background-color: #fff;
  position: absolute;
}

.up {
  top: 0;
  left: 75px;
}

.down {
  bottom: 0;
  left: 75px;
}

.left {
  top: 75px;
  left: 0;
}

.right {
  top: 75px;
  right: 0;
}

.button::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border: 2px solid #000;
  border-radius: 50%;
}