【テクニック】CSSで半円・縁取り・弧を作る方法

RELEASE / 2023.11.12 UPDATE / 2023.11.16

css

HTML

テクニック

半円

縁取り

こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。

CSSは様々な形を作ることが出来ます。正円はもちろん、半円、縁取りの半円、半円の弧の部分などデザイナーが作るデザインに合わせてコーダーはコーディングで再現する必要があります。
画像で表示すれば簡単ですが、画像の場合、容量が大きくなりがちのため、CSSで作ることの出来る図形はCSSで再現した方がページの表示速度にも影響してきます。
今回の記事では半円、縁取りの半円、半円の弧の部分の作り方を解説していきたいと思います。

この記事で使用するHTMLは全て以下を使用します。
各コンテンツごとにそれぞれCSSのみご紹介します。

HTML

<div class="circle-top"></div>
<div class="circle-left"></div>
<div class="circle-right"></div>
<div class="circle-bottom"></div>

この記事の目次を表示

1 べた塗りの半円の作り方
2 縁取りの半円の作り方
3 半円の弧の作り方
- 3.1 transform: rotate();を使用
- 3.2 実装サンプル
4 まとめ

べた塗りの半円の作り方

まずべた塗りの半円の作り方を見てみましょう。
上半円、左半円、下半円、右半円それぞれのCSSは以下の通りです。

CSS

.circle-top{
    width: 100px;
    height: 50px;
    background: #3d8582;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
}
.circle-left{
    width: 50px;
    height: 100px;
    background: #3d8582;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
}
.circle-right{
    width: 50px;
    height: 100px;
    background: #3d8582;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
}
.circle-bottom{
    width: 100px;
    height: 50px;
    background: #3d8582;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
}

実装サンプル

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

transform: rotate();を使用

それぞれborder-radiusの向きを指定しなくてもtransform: rotate();を使用することで、全て同じ向きのborder-radiusで対応することも可能です。
ただし、transform: rotate();を使用する場合、左右の時、若干位置取りが難しくなるため、実際使用するとなると先にご紹介した方法が実用的だと思います。
こちらの方法はposition: absolute;と併用する場合は採用してもいい方法かもしれません。

.circle-top{
    width: 100px;
    height: 50px;
    background: #3d8582;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
}
.circle-left{
    width: 100px;
    height: 50px;
    background: #3d8582;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    transform: rotate(-90deg);
}
.circle-right{
    width: 100px;
    height: 50px;
    background: #3d8582;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    transform: rotate(90deg);
}
.circle-bottom{
    width: 100px;
    height: 50px;
    background: #3d8582;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    transform: rotate(180deg);
}

実装サンプル

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

縁取りの半円の作り方

続いて縁取りの半円の作り方を見てみましょう。
上半円、左半円、下半円、右半円それぞれのCSSは以下の通りです。
先ほどの半円にborderプロパティの指定を追加することで実装出来ます。

CSS

.circle-top{
    width: 100px;
    height: 50px;
    background: #e8c72e;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    border: 2px solid;
}
.circle-left{
    width: 50px;
    height: 100px;
    background: #e8c72e;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
    border: 2px solid;
}
.circle-right{
    width: 50px;
    height: 100px;
    background: #e8c72e;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    border: 2px solid;
}
.circle-bottom{
    width: 100px;
    height: 50px;
    background: #e8c72e;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    border: 2px solid;
}

実装サンプル

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

transform: rotate();を使用

半円縁取りもtransform: rotate();を使用することで、全て同じ向きのborder-radiusで対応することも可能です。
ただし、transform: rotate();を使用する場合、左右の時、若干位置取りが難しくなるため、実際使用するとなると先にご紹介した方法が実用的だと思います。
こちらの方法はposition: absolute;と併用する場合は採用してもいい方法かもしれません。

CSS

.circle-top{
    width: 100px;
    height: 50px;
    background: #e8c72e;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    border: 2px solid;
}
.circle-left{
    width: 100px;
    height: 50px;
    background: #e8c72e;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    transform: rotate(-90deg);
    border: 2px solid;
}
.circle-right{
    width: 100px;
    height: 50px;
    background: #e8c72e;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    transform: rotate(90deg);
    border: 2px solid;
}
.circle-bottom{
    width: 100px;
    height: 50px;
    background: #e8c72e;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    transform: rotate(180deg);
    border: 2px solid;
}

実装サンプル

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

半円の弧の作り方

最後に縁取りの半円の作り方をご紹介します。。
上半円、左半円、下半円、右半円それぞれのCSSは以下の通りです。
先ほどの半円の縁取りにさらに線を消したい部分のborderプロパティにnoneを指定することで実装出来ます。

CSS

.circle-top{
    width: 100px;
    height: 50px;
    background: transparent;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    border: 2px solid;
    border-bottom: none;
}
.circle-left{
    width: 50px;
    height: 100px;
    background: transparent;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
    border: 2px solid;
    border-right: none;
}
.circle-right{
    width: 50px;
    height: 100px;
    background: transparent;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    border: 2px solid;
    border-left: none;
}
.circle-bottom{
    width: 100px;
    height: 50px;
    background: transparent;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    border: 2px solid;
    border-top: none;
}

transform: rotate();を使用

半円の弧も他同様、transform: rotate();を使用することで、全て同じ向きのborder-radiusで対応することも可能です。
ただし、transform: rotate();を使用する場合、左右の時、若干位置取りが難しくなるため、実際使用するとなると先にご紹介した方法が実用的だと思います。
こちらの方法はposition: absolute;と併用する場合は採用してもいい方法かもしれません。

CSS

.circle-top{
    width: 100px;
    height: 50px;
    background: transparent;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    border: 2px solid;
    border-bottom: none;
}
.circle-left{
    width: 100px;
    height: 50px;
    background: transparent;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    transform: rotate(-90deg);
    border: 2px solid;
    border-bottom: none;
}
.circle-right{
    width: 100px;
    height: 50px;
    background: transparent;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    transform: rotate(90deg);
    border: 2px solid;
    border-bottom: none;
}
.circle-bottom{
    width: 100px;
    height: 50px;
    background: transparent;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    transform: rotate(180deg);
    border: 2px solid;
    border-bottom: none;
}