SOURCE

<div class="compass-indicator">
  <div class="arrow" style="--rotate:0deg;"></div>
  <div class="arrow" style="--rotate:90deg;"></div>
  <div class="arrow" style="--rotate:180deg;"></div>
  <div class="arrow light" style="--rotate:270deg;"></div>  
</div>

.arrow {
  --width: var(--arrow-width, 50px);
  --height: var(--arrow-height, 200px);
  --color: var(--arrow-color, blue);

  width: var(--width);
  height: var(--height);
  transform-origin: 50% 100%;
  background-color: var(--color);
  position: absolute;
  top: 0;
  left: 50%;
  clip-path: polygon(50% 0, 100% 50%, 70% 50%, 50% 100%, 30% 50%, 0 50%);
  transform: translate(-50%, 0) rotate(var(--rotate));
}
.arrow.light {
  --color: var(--arrow-light-color, blue);
}

.compass-indicator {
  --arrow-width: 50px;
  --arrow-height: 100px;
  --arrow-color: blue;
  --arrow-light-color: yellow;
  --size: calc(max(var(--arrow-height), var(--arrow-width)) * 2);
  position: relative;
  width: var(--size);
  height: var(--size);
  background: red;
  border-radius: 50%;
  border: 4px dashed orange;
}