この記事は2018年2月19日に書かれたもので、内容が古い可能性がありますのでご注意ください。
よくビジネス系のページや若者向けのページに多いのが、背景を斜めにしてその上にテキストを乗せるパターン。
背景を斜めにするだけで、躍動感が出て、デザインセンスがぐっと上がります。
覚えておくと便利なので、デモを作成しました。
斜めの背景帯+帯の下に背景画像+レスポンシブ対応になっています。
DEMO
HTML
<div class="bg_1"> <div class="contents"> <div class="contents_inner"> <!--帯の中のコンテンツ--> </div> </div> </div>
CSS
.bg_1 { width: 100%; height: 400px; background-image: url(画像URL); background-size: cover; background-position: center; padding: 35% 0 0 0; } .contents { position: relative; overflow: hidden; padding: 80px 0; z-index: 2; } .contents:before { content: ''; position: absolute; top: 0; left: 0; width: 120%; height: 70%; margin: 3% -10% 0; background: #245037; -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; -webkit-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg); z-index: -1; } .contents_inner { box-sizing: boder-box; width: 100%; max-width: 640px; height: 100%; margin: 0 auto; padding: 100px 10px 120px; color: #fff; text-align: center; }
.bg_1に帯の下に敷く背景画像を入れてください。
.bg_1のheight値は画像によって変えてください。(帯の間からの画像の見え方が変わります)
rotate(3deg)の数値を変更することによって斜めの角度が変わります。
例えばrotate(-3deg)にすると逆の傾斜になります。
marginやpaddingは文字サイズや文字量によって調節してください。
デモページでは左に傾斜+右に傾斜+2つの帯を重ねるという3パターンの記述をしています。
DEMO
こちらの記事を参考にさせていただきました。
CSSのみで背景を全体的に斜めにして傾斜をつける方法 | UNORTHODOX WORKBOOK | Blog