メインビジュアルの画像の下に丸みを付ける方法

『メインビジュアルの画像の下に丸みを付ける』とは？

Webサイトのコーディングをしていて、メインビジュアルに背景画像を入れることはよくあると思います。

で、さらに背景画像の下の部分だけ丸みを付けたいことってないですか？下の画像みたいに星空の下をたゆませるというか円弧にするやり方です。

色々やってみた結果、上手くいく方法がわかったので紹介したいと思います！

実装方法

まずはコードから。“border-bottom-right(left)-radius”を使って丸みを付けるところがポイントです。

やり方としては、ざっくり言うとこんな感じ。

①背景にbackground-imageで画像を配置する。
②border-bottom-right(left)-radiusで画像下の左右を丸く削る。
③左右の円弧の端の丸くなりすぎた部分をmarginとpaddingで調整する。

ちなみに、疑似要素beforeで透過した白を重ねていますが、ここは不要であればいらないので削除します。

このやり方だと画像を丸く加工する必要がないので便利かと思います。たとえば、途中でデザイン修正が来てメインビジュアルの縦幅を全体を見ながら可変したいときとか。

あとは、メインビジュアル以外でも背景画像を背景色に変えることも可能ですので、よかったらやってみてください。

【余談】CodePenを使ってみた

今回のブログから、ソースコードの表示にCodePenを使うことにしました。

CodePenとは？
HTML、CSS、JSなどのソースコードと表示をサイトに埋め込めむことができるツール。
コードがタブ分けされていて見やすい＆コーピーしやすい。無料で使える。

めっちゃ便利なので今後もコーディングの学習記録はこれで行こうと思います。もっと早く使っておけばよかった…！