borderのみの半円を作りたい！

完成形がこんな感じ↓の枠線だけがついた半円を作りたい！
あと、一つのdivだけで作りたい！
f:id:pocopota:20210903224911p:plain

早速完成品



条件通りdivは一つでいきたいと思います。

<div class="circle"></div>

.circle{
    width: 200px;
    height: 100px;
    overflow: hidden;
}
.circle:before{
    content: '';
    display: block;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    border: 15px solid black;
}

とってもシンプルなコードでできました

仕組み

:beforeで枠線をつけた円を普通に作ります。
そして親要素のdivを:beforeの半分のサイズにします。
そして親要素にoverflow:hidden;をつけて、その要素からはみでた子要素は非表示にしています。

親要素のサイズは:before自体のサイズにborderのサイズが足されたものなのでご注意を。

1/4のサイズ

これと同じような仕組みで1/4のものも作れるでしょう。
htmlは先程のものと変わりません。
親要素のwidthを半分にしただけです。

    .circle{
        width: 100px;
        height: 100px;
        overflow: hidden;
    }
    .circle:before{
        content: '';
        display: block;
        width: 170px;
        height: 170px;
        border-radius: 50%;
        border: 15px solid black;
    }

まとめ

overflowって便利だね