Du menu hamburger à la croix en CSS

Bonjour,

J'ai trouvé un bout de code sur le site W3Schools tout à fait intéressant, et je l'ai déjà un peu modifié pour m'approcher du résultat escompté. Il y a une seule chose que je ne parviens pas à faire ; que .bar1 et .bar2 changent leur longueur pour rejoindre le coin opposé du container. La longueur serait donc égale à l’hypoténuse d'un triangle rectangle dont les cathètes mesurent 50px.

<style>
.container {
  display: inline-block;
  cursor: pointer;
  height: 50px;
  width: 50px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.bar1, .bar2, .bar3 {
  height: 5px;
  width: 100%;
  background-color: #454545;
  transition: 0.4s;
  border-radius: 5px;
}

.bar1 {
transform-origin: right;
width: 50px;
}

.bar3 {
transform-origin: right;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  
}
</style>

<div class="container change" onclick="myFunction(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

<script>
function myFunction(x) {
  x.classList.toggle("change");
}
</script>

Une idée ?

Avec mes remerciements,

Celio