ここのサイトは、ヘッダー部分の背景色に緑や、途中にグレーの背景色を使っていると思うのですが、背景色の色が塗られている部分が、ひし形みたいな正方形や長方形以外になってますよね?
ここの部分について、すごく不思議なのでぜひ教えていただけましたら幸いです!
デベロッパーツールで見ると、
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枚並んでいる画像、「今すぐ無料ではじめる」ボタンは歪みません。
どうしてなんでしょうか?
すごく基礎的な質問で恐縮ですが、よろしくお願い致します。
(追記)ちゃんと内包するすべての要素が歪みました。
回答2件
あなたの回答
tips
プレビュー