Q&A
どういうデザインにしたいのかよく分かりません。角度と青い部分の高さを一定にすると、全体の高さは表示幅によって変わるのでは…。
前提・実現したいこと
WEBサイトを制作しています。
背景装飾として、色の付いた平行四辺形を作成しているのですが、画面サイズを変えると
平行四辺形の角度や高さが変わってしまうため、一定のデザインとする事が出来ません。
画面サイズ変更で角度や高さが変わらない横幅100%の平行四辺形を作成したい
です。
画面サイズ：2560px表示時（ワイドディスプレイ）
画面サイズ：1200px表示
発生している問題・エラーメッセージ
画面サイズによって、平行四辺形の角度と高さが変わってしまう
該当のソースコード
html
1<div class="bg"></div>
CSS
1.bg { 2 width: 100%; 3 height: 300px; 4 background: #5905f5; 5 clip-path: polygon(0 28%, 100% 0, 100% 73%, 0% 100%); 6}
試したこと
・borderで作成
・transform:skewで作成
・transform:rotateで作成
・clip-pathで作成（上記ソース）
環境
・GoogleChrome 98.0.4758.102
・VScode1.64.2
・ResetCSSは以下を使用
Josh's Custom CSS Reset
https://www.joshwcomeau.com/css/custom-css-reset/
補足
画像を作成してそれを配置する事はやりたくありません。
CSSにこだわっている訳では無いので、
JavaScript使えばすぐだよ、こういったライブラリがあるよ、
このサイトで実装しているよ、
などの情報も大歓迎です。
ご助言の程、
何卒宜しくお願い致します。
高さが変わらないというのは横との比率という意味ですか？それともピクセル単位でということですか？
回答が遅くなり申し訳ありません。
>hoshi-takanoriさん
分かりにくくてすみません・・・。
画面の表示幅によって、要素全体の高さではなく、青い部分、平行四辺形の高さを一定としたいです。
レスポンシブで高さを比率によって可変とするのではなく、完全固定としたいです。
>yambejpさん
ピクセル単位です。比率で可変とならず、ピクセル完全固定としたいです。
回答1件
0
下記でどうでしょう。
css
1.bg { 2 width: 100%; 3 height: 300px; 4 background: #5905f5; 5 clip-path: polygon(0 10vw, 100% 0, 100% calc(300px - 10vw), 0% 100%); 6}
10vwの数値を変更することでお好みの角度にしてください。
ひょっとするとこちらの方がご希望に近いかな。
css
1.bg { 2 width: 100%; 3 height: calc(300px + 10vw); 4 background: #5905f5; 5 clip-path: polygon(0 10vw, 100% 0, 100% 300px, 0% 100%); 6}
前者はbgブロックの高さ固定、
後者は平行四辺形の縦の辺の高さ固定
投稿2022/03/01 01:43
編集2022/03/01 01:52
総合スコア33692
ご返信が遅くなり申し訳ありません。ご助言頂きありがとうございます。
角度は固定となりました！
ただ、前者、後者両方試してみたのですが、やはり高さが可変となってしまいます・・・。
後者の方が高さの変化幅が少なかったですが、
デベロッパーツールで確認すると、
画面サイズ：2560px表示時（ワイドディスプレイ）
height:500.5px
画面サイズ：1200px相当表示（多少誤差あり）
height:429.59px
と、画面サイズによって高さが変わっており（目視でも変化を確認。
完全な固定でなくとも、例えば、
%やvw部分を調整する事で、限りなく変化幅を少なくするなど、出来るのでしょうか・・・？
まずは、
平行四辺形が含まれるボックスの高さを固定したいのか、
平行四辺形の縦の辺の長さを固定したいのか、
それとも、それ以外のことが希望なのか明確にしてください。
提示のコードは、上記の前者の場合と、後者の場合に適合してます。
デベロッパーツールで確認できる高さはブロックの高さです。
ブロックの高さを固定したいなら、前者のコードになります。その場合は、平行四辺形の縦サイズは変化します。
あなたの回答
tips
プレビュー
