ひし形の背景にひし形をつけたい時、transform: skewY(-●deg)を：beforeにかける意味 CSS3

https://www.invoy.jp/?gclid=CjwKCAjwqZPrBRBnEiwAmNJsNitubrF6xhQTahDsMDNPKyXnFdTgva57tvGhP1mgega8My6Piw_OJRoCaIsQAvD_BwE

ここのサイトは、ヘッダー部分の背景色に緑や、途中にグレーの背景色を使っていると思うのですが、背景色の色が塗られている部分が、ひし形みたいな正方形や長方形以外になってますよね？
ここの部分について、すごく不思議なのでぜひ教えていただけましたら幸いです！

デベロッパーツールで見ると、

CSS3
1.product_site_content_row_01:before {
2    content: '';
3    position: absolute;
4    top: 0;
5    left: 0;
6    width: 100%;
7    height: 100%;
8    -webkit-transition: all 0.25s ease;
9    transition: all 0.25s ease;
10    background: linear-gradient(153deg, #64B200, #AFC114);
11    -webkit-transform: skewY(-6deg);
12    transform: skewY(-6deg);
13    z-index: -1;
14}

こんなところにグラデーションの塗る色が設定されてますが、なぜ:beforeに色の指定があるのか分からないです。

:beforeの必要性がわからないので、デベロッパーツールで.product_site_content_row_01に直接塗りとz-index: -1;で後ろに出すっていうのをやってみたら、ナビゲーションメニューの形状がひし形に歪んでしまい、それが内包する全ての要素が全部歪むならわかるのですが、なぜかproduct_site_content_row_01の中でもproduct_site_content_container_01クラス内の「0円でカンタンな請求書」や請求書が3枚並んでいる画像、「今すぐ無料ではじめる」ボタンは歪みません。

どうしてなんでしょうか？

すごく基礎的な質問で恐縮ですが、よろしくお願い致します。

(追記)ちゃんと内包するすべての要素が歪みました。

Lhankor_Mhy

2019/08/28 03:05

試してみましたが、「0円でカンタンな請求書」や請求書が3枚並んでいる画像はゆがみました。「今すぐ無料ではじめる」ボタンはゆがみませんでした。

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

回答2件

背景に傾斜をつける方法をほかにもありますが、
今回の参考にされているサイトでは

css
1transform: skewY(-6deg);

というもので傾斜をつけています。

このプロパティはブロックレベル要素、インライン要素が対象になります。

よって、.product_site_content_row_01に直接設定するとその中の対象要素が斜めになります。

こういうことが起こらないように:beforeに設定しています。

プロパティの詳しい説明はこちらを見てください。

投稿2019/08/28 03:13

beginner_t

総合スコア716

ベストアンサー

まず前提として、参考サイトにあるような歪んだ背景をCSSの背景指定だけで表現するのは困難です。
そのためHTMLの要素をCSS（transform）で歪め、それをpositionで配置することで背景を表現させています。

なぜ:beforeに色の指定があるのか分からないです。

背景用のHTML要素に擬似要素（:beforeや:after）を使用しているため色の指定が必要になります。
必要なのはHTML要素なので必ずしも疑似要素を使う必要はありません。
例えば以下のようなコードでも同様に背景を作ることは可能です。

html
1<head>
2  <style>
3    .product_site_content_row_01 > .bg {
4      /* 参考サイトと同様のコードのため割愛 */
5    }
6  </style>
7</head>
8<div class="product_site_content_row_01">
9  <div class="bg"></div>
10</div>