<div class="container">
  <button class="left" type="button"></button>
  <button class="up" type="button"></button>
  <button class="down" type="button"></button>
  <button class="right" type="button"></button>
</div>

:root {
  --color-arrow: yellow;
  --color-bg: #335577;
  --size-arrow: 100px;
  --stroke-arrow: 20px;
  --style-arrow: groove;
}

* { margin: 0; padding: 0; }

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
}

button {
  position: relative;
  width: var(--size-arrow);
  height: var(--size-arrow);
  margin: 40px;
  background: transparent;
  border: 0;
  border-left: var(--stroke-arrow) var(--style-arrow) var(--color-arrow);
  border-bottom: var(--stroke-arrow) var(--style-arrow) var(--color-arrow);
  cursor: pointer;
}
button::before {
  position: absolute;
  left: 0;
  top: calc(var(--size-arrow) - var(--stroke-arrow) * 1.5);
  clip-path: polygon(0 50%, calc(var(--stroke-arrow) / 2) 0, 100% 0, 100% 100%, calc(var(--stroke-arrow) / 2) 100%);
  width: calc(var(--size-arrow) * 1.2);
  height: 0;
  border-top: var(--stroke-arrow) var(--style-arrow) var(--color-arrow);
  transform-origin: 0 50%;
  transform: rotate(-45deg);
  content: '';
}

button:hover  { opacity: 0.75; }
button:active { opacity: 0.5; }

.left  { transform: rotate(  45deg); }
.right { transform: rotate(-135deg); }
.up    { transform: rotate( 135deg); }
.down  { transform: rotate( -45deg); }