cssを学び始めたので備忘録として
htmlとcssだけで円を作図し、中央に入れ子にしたい。
html
sample.html
<divclass="circle1"><divclass="circle2"><divclass="circle3"><divclass="circle4"></div></div></div></div>css
sample.css
.circle1{margin:0auto;width:30%;}.circle2{position:relative;width:100%;padding-top:100%;border-radius:50%;background-color:#f389da}.circle3{position:absolute;top:50%;left:50%;width:75%;padding-top:75%;border-radius:100%;background-color:#14baed;transform:translate(-50%,-50%);}.circle4{position:absolute;top:50%;left:50%;width:50%;padding-top:50%;background-color:#faf82d;transform:translate(-50%,-50%);}こんな感じ
border-radiusをなくすと正方形にできます。
positionとtransformで中心に合わせています。
最外のcircle1では円を描いてないけど、基準の幅（width: 30%)を設定しているので、これがないと中心に合わせられない。
参考記事
【CSS】子要素を親要素内で上下左右中央寄せさせる方法
レスポンシブな正円の中央に文字を配置するCSS
サイズ可変の正方形や正円をCSSで描画したい