サイト模写　背景画像の下側を丸くしたい

質問

PAS-POLというサイトの模写をやっていいるのですが、下の写真のような背景画像の丸みを再現できません。border-radiusを使えばいいのかと考えて下記の様にプログラムを書きましたがエラーが起きうまく反映されませんでした。border-radiusを使えば再現できるのか解説よろしくお願いします。

該当のソースコード

css
1.header{
2  position: relative;
3  background: url(../images/main_visual_111-0x0.jpg)no-repeat;
4  background-size: cover;
5  color: #ffffff;
6  padding: 10px 0 440px;
7  border-radius: 0 0 600px / 60px 600px / 60px;
8}

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答2件

border-radiusプロパティを今回は例として使用します。
##仕様

border-radius は CSS のプロパティで、要素の境界の外側の角を丸めます。1つの半径を設定すると円の角になり、2つの半径を設定すると楕円の角になります。

border-radius | MDN

下記でどうでしょうか？右下・左下を丸めています。

##コード

CSS
1border-radius: 0% 0% 15% 15%;

##説明
上記に記載してあるMDNに詳細は記載されているのですが、簡単な説明をしときます。
border-radiusプロパティでの値では下記にある通り対応してます。

CSS
1/* 左上 | 右上 | 右下 | 左下 */
2border-radius: 0% 0% 15% 15%;

また、border-radiusで値を50%とした時に正円となりますので、そちらはよく使うテクニックです。

##余談
模写の場合ですと、模写したサイトのコードが見れるはずです。Google Chromeをご使用されている場合は、要素を検証していただくと、割り当てられてるスタイリングがわかりますので、ぜひそちらもご参考にしてみてください。

投稿2020/04/21 15:04

kai0310

総合スコア2076

kai0310

2020/04/21 15:32

解決できましたでしょうか？

kelt22

2020/04/22 05:47

返信遅くなりました。解決できました。ありがとうございます。

行動規範の内容に同意します

ベストアンサー

https://pas-pol.jp/
のサイトを拝見すると、

html
1<div class="m-mainVisual-overlay"></div>

css
1.m-mainVisual-overlay {
2    position: absolute;
3    bottom: 0;
4    left: 0;
5    width: 100%;
6    height: 100%;
7    background: url(../img/mainVisual-overlay@2x.png) no-repeat;
8    background-size: contain;
9    background-position: 0 bottom;
10}