033ハンバーガ3_1

円ができます。

    <input type="checkbox" id="hamburger"><!--入力 -->
    <label for="hamburger"><!--入力用の図形の作成位置 -->
     <div id="container"><!--入れ物 -->
     </div>
    </label> 
CSS
*{
    margin: 0;/*外縁なし*/
    padding: 0;/*内縁なし*/
    box-sizing: border-box;/*?*/
}
#container{/*divタグのidに対しての装飾*/
    background: tomato;/*円の色*/
     display: inline-block;/*枠からはみ出さない*/
    border-radius: 50px;/*角を丸く50以上で丸*/
    margin: 10px;
    position: relative;/*相対場所*/
    padding: 50px;
    cursor: pointer;/*円内部ではカーソルは指の形*/
}
  

実行結果

032ハンバーガ2
目次,033ハンバーガ3_2
034ハンバーガ4