一本線を描きます。
<input type="checkbox" id="hamburger"><!--入力 -->
<label for="hamburger"><!--入力用の図形の作成位置 -->
<div id="container"><!--入れ物 -->
<div class="circle icon"><!-- 円の領域 -->
<span class="bar top"></span> <!--線 上 -->
<span class="bar middle"></span> <!--線 中-->
<span class="bar bottom"></span><!--線 下-->
</div>
</div>
</label>
CSS
*{
margin: 0;/*外縁なし*/
padding: 0;/*内縁なし*/
box-sizing: border-box;/*?*/
}
#container{/*divタグのidに対しての装飾*/
background: tomato;/*円の色*/
display: inline-block;/*枠からはみ出さない*/
border-radius: 50px;/*角を丸く100以上で丸*/
margin: 10px;
position: relative;/*相対場所*/
padding: 50px;
cursor: pointer;/*円内部ではカーソルは指の形*/
}
.circle {/*円の領域の大きさ指定*/
position: relative;/*相対場所*/
width: 100px;
height: 100px;
}
.bar {/*角の丸い白い太線を引きます。*/
position: absolute;/*絶対座標*/
width: 100px;/*幅*/
height: 12px;/*高さ*/
background: white;/*色*/
border-radius: 8px;/*角*/
transition: ease 0.3s;/*スピード*/
}