body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: rgb(2, 1, 3);
  color: rgb(2, 180, 2);
  font-size: 30px;
  font-weight: 700;
  font-family: Arial, Helvetica, sans-serif;
}

.shape span {
  position: absolute;
}

.shape span:nth-child(1) {
  position: absolute;
  width: 320px;
  height: 100px;
  border: 8px solid rgb(2, 180, 2);
  margin-left: -25px;
  margin-top: -10px;
}

.shape span:nth-child(2) {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: rgb(2, 1, 3);
  border: 8px solid rgb(2, 1, 3);
  margin-left: 10px;
  margin-top: -20px;
  transform: skew(30deg, 20deg);
  transition: 1s;
}

.shape span:nth-child(3) {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: rgb(2, 1, 3);
  border: 8px solid rgb(2, 1, 3);
  margin-left: 250px;
  margin-top: 90px;
  transform: skew(30deg, 20deg);
  transition: 1s;
}

.shape:hover span:nth-child(2) {
  transform: translateX(240px) skew(30deg, 20deg);
}

.shape:hover span:nth-child(3) {
  transform: translateX(-240px) skew(30deg, 20deg);
}