Comment puis-je orienter les divs correctement dans un autre div?

Question

J'essaie de créer une barre latérale avec un bouton de menu animé. J'ai trouvé un exemple en ligne du bouton que j'ai imaginé et j'essaie de l'utiliser correctement mais je n'arrive pas à l'obtenir où je veux sur ma page. Pourquoi les trois divs qui composent le bouton animé apparaissent à droite du trapèze et non à l'intérieur?

#trap { 
 
\t  position: absolute; 
 
\t  left: 0px; 
 
\t  top; 0px; 
 
\t  height: 38px; 
 
\t  width: 40px; 
 
\t  border-left: 40px solid black; 
 
\t  border-bottom: 5px solid transparent; 
 
\t  border-top: 5px solid transparent; 
 
\t  margin-left: 0; 
 
\t  transition: 0.5s; 
 
    } 
 

 
    .container { 
 
     display: inline-block; 
 
     cursor: pointer; 
 
    } 
 

 
    .bar1, .bar2, .bar3 { 
 
     width: 35px; 
 
     height: 5px; 
 
     background-color: #A4A4A4; 
 
     margin: 6px 0; 
 
     transition: 0.4s; 
 
    } 
 

 
    .change .bar1 { 
 
     -webkit-transform: rotate(-45deg) translate(-9px, 6px) ; 
 
     transform: rotate(-45deg) translate(-9px, 6px) ; 
 
    } 
 

 
    .change .bar2 {opacity: 0;} 
 

 
    .change .bar3 { 
 
     -webkit-transform: rotate(45deg) translate(-8px, -8px) ; 
 
     transform: rotate(45deg) translate(-8px, -8px) ; 
 
    }

<div id="trap" class="container" onclick="toggleNav(this)"> 
 
\t  <div class="bar1"></div> 
 
\t  <div class="bar2"></div> 
 
\t  <div class="bar3"></div> 
 
    </div>

Answer 1

de border-left Le #trap pousse les bar s à droite. Une solution possible consiste à déplacer le bar en arrière à gauche en utilisant position:relative. MISE À JOUR: l'élément fantôme est dû au fait que vous avez à la fois un border-width et un width sur l'élément #trap. Parce que les navigateurs ne doivent pas inclure la largeur de la bordure dans le calcul de la largeur, les deux ont été pris en compte.

La solution serait juste de changer width: 40px-width:0px, de sorte que est de changer la propriété box-sizing-border-box la définition largeur de la frontière est le seul qui est utilisé, mais ma situation préférée (mise à jour dans l'extrait) plus simple. La propriété width prend en compte la largeur de la bordure de l'élément, de sorte que les deux propriétés ne s'ajoutent pas l'une à l'autre. J'ai également dû augmenter le height pour empêcher le fond d'être coupé.

#trap { 
 
\t  position: absolute; 
 
\t  left: 0px; 
 
\t  top; 0px; 
 
\t  height: 38px; 
 
\t  width: 40px; 
 
     box-sizing: border-box; 
 
\t  border-left: 40px solid black; 
 
\t  border-bottom: 5px solid transparent; 
 
\t  border-top: 5px solid transparent; 
 
\t  margin-left: 0; 
 
\t  transition: 0.5s; 
 
    } 
 

 
    .container { 
 
     display: inline-block; 
 
     cursor: pointer; 
 
    } 
 

 
    .bar1, .bar2, .bar3 { 
 
     width: 35px; 
 
     height: 5px; 
 
     background-color: #A4A4A4; 
 
     margin: 6px 0; 
 
     transition: 0.4s; 
 
     left:-35px; 
 
     position:relative; 
 
    } 
 

 
    .change .bar1 { 
 
     -webkit-transform: rotate(-45deg) translate(-9px, 6px) ; 
 
     transform: rotate(-45deg) translate(-9px, 6px) ; 
 
    } 
 

 
    .change .bar2 {opacity: 0;} 
 

 
    .change .bar3 { 
 
     -webkit-transform: rotate(45deg) translate(-8px, -8px) ; 
 
     transform: rotate(45deg) translate(-8px, -8px) ; 
 
    }

<div id="trap" class="container" onclick="toggleNav(this)"> 
 
\t  <div class="bar1"></div> 
 
\t  <div class="bar2"></div> 
 
\t  <div class="bar3"></div> 
 
    </div>