divを別のdiv内で適切に配置するにはどうすればよいですか？

Question

アニメーションメニューボタン付きのサイドバーを作成しようとしています。私は想像したボタンの例をオンラインで見つけて、それを正しく使用しようとしていますが、私のページ上でそれを得ることはできません。アニメーションボタンを構成する3つのdivが台形の右側に表示され、その台形内に表示されないのはなぜですか？

#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

#trapのborder-leftは右にbar Sを推進しています。考えられる解決策の1つは、position:relativeを使用してbarを左に戻すことです。

更新：ゴースト要素は、#trap要素にborder-widthとwidthの両方があることが原因です。ブラウザのデフォルトでは、幅の計算に境界線の幅が含まれないため、両方が考慮されました。

ボーダーの幅の定義が使われているだけですが、（スニペットに更新）私の好適な状況がborder-boxにbox-sizingプロパティを変更することであるように、最も簡単な解決策は、単にwidth:0pxにwidth: 40pxを変更することです。これにより、widthプロパティは要素の境界線の幅を考慮に入れるため、2つのプロパティは互いに追加されません。私はまた、heightを大きくして、ボトムが切り取られないようにしなければなりませんでした。

#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>