.boussole {
  position: absolute;
  top: 10%;
  left: 5%;
  width: 5vmin;
  height: 5vmin;
  background: radial-gradient(#02B6EE, #087EDE);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: solid 1vmin #fdfdfd;
  transform-origin: center;
  transform: rotate(0deg);
  visibility: true;
}


.aiguille {
  position: relative;
	left:28%;
	right:25%;
  width: 50%;
  height: 100%;
  
}


.aiguille::before,
.aiguille::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;

}

.aiguille::before {
  bottom: 50%;
  border-left: 1vmin solid transparent;
  border-right: 1vmin solid transparent;
  border-bottom: 5vmin solid #fdfdfd;
}
.aiguille::after {
  top: 50%;
  border-left: 1vmin solid transparent;
  border-right: 1vmin solid transparent;
  border-top: 5vmin solid red;
}