このサイトに使われている技術がわかりません。

Question

下のURLなのですが、
sectionの境のぐにゃっとした部分が
画像で作られているように思います。

しかし、クロームのELEMENTSで追ってみても
画像のURLにたどり着きません。

ひょっとしてjsやcssを使っているのでしょうか？

https://www.naturesway.co.jp/

どなたかわかる人、解説のほどをお願いします・・・

Answer 1

これですね。

.pic-deco.home-1 {
    background-image: url(../img/common/wave_top_up_green.png), url(../img/common/wave_under_yellow.png), url(../img/home/bg_pic_01.jpg);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-size: auto, auto, cover;
    background-position: center top, center bottom, center center;
}

background-imageに波線の画像を当ててるみたいです。

TOPのところだけ1px隙間が空いているのが気になる・・・。

Comments

[takane]

ありがとうございます。
すみません、探し方が甘かったようです。

Answer 2

www.naturesway.co.jp/wp-content/themes/original/asset/img/common/wave_footer_under_gray.png

これですね。
セクションの境目に、この画像を張ってあるだけのように見えます。

Comments

[takane]

ありがとうございます。
すみません、探し方が甘かったようです。

Answer 3

単に、CSSでそういう波型の背景画像を当ててあるだけのようです。

PNGやSVGは透過もできるので、長方形でない形の表現に使うこともあります。

Comments

[takane]

ありがとうございます。
すみません、探し方が甘かったようです。

Answer 4

画像ですね。
最初の曲線は.home .main-header .maskにbackground-imageが当たってます。

画像URLは
https://www.naturesway.co.jp/wp-content/themes/original/asset/img/common/wave_top_under_white.png

Comments

[takane]

ありがとうございます。
すみません、探し方が甘かったようです。

Answer 5

ぐにゃっとした部分は画像でした
（tsuntsunさんと同じです）

common.css

.main-area {
    background-image: url(../img/common/wave_footer_under_gray.png);
    background-position: bottom center;
    background-repeat: no-repeat;
    padding-bottom: 70px;
}

Comments

[takane]

ありがとうございます。
すみません、探し方が甘かったようです。

Answer 6

直接的な回答ではありませんが下記リンクChromeプラグインを入れてWEBページを開くと何のライブラリが使われているか一目でわかるようになるので便利です。
https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg?hl=ja