css写一个简单的方向操作

效果:

// html
<div class="btnBox">
  <button class="top">&uarr;</button>
  <button class="left">&larr;</button>
  <button class="right">&rarr;</button>
  <button class="bottom">&darr;</button>
  <div class="upDiv">+</div>
  <div class="downDiv">-</div>
</div>

style:

.btnBox {
          position: relative;
          width: 145px;
          height: 145px;
          margin: 300px auto;
        }
        button {
          width: 45px;
          height: 45px;
          text-align: center;
          font-weight: 900;
          background: #36ab8e;
          cursor: pointer;
          outline: none;
          color: white;
          border-color: #36ab8e;
          font-size: large;
          position: absolute;
        }
        .top {
          border-radius: 2rem 2rem 0 0;
          left: 50%;
          top: 0;
          transform: translate(-50%, 0%);
        }
        .left {
          border-radius: 2rem 0 0 2rem;
          left: 0;
          top: 50%;
          transform: translate(0%, -50%);
        }
        .right {
          border-radius: 0 2rem 2rem 0;
          right: 0;
          top: 50%;
          transform: translate(0%, -50%);
        }
        .bottom {
          border-radius: 0 0 2rem 2rem;
          left: 50%;
          bottom: 0;
          transform: translate(-50%, 0%);
        }
        .btnBox div {
          border: 1px solid #36ab8e;
          background-color: #36ab8e;
          color: white;
          font-size: large;
          width: 45px;
          height: 20px;
          margin: 1px auto;
          text-align: center;
          border-radius: 0 0 2rem 2rem;
          cursor: pointer;
          position: absolute;
        }
        .btnBox .upDiv {
          border-radius: 2rem 2rem 0 0 ;
          top: 49px;
          left: 49px;
        }
        .btnBox .upDiv:active {
          top: 48px;
        }
        .btnBox .downDiv {
          bottom: 49px;
          right: 49px;
        }
        .btnBox .downDiv:active {
          bottom: 48px;
        }