Clip PathでSlant background

バックグラウンドを斜めの背景にしてみよう

背景を斜めにする方法はいくつかありますが、ここではclip-pathを利用して作成します。
IEのサポート終了で使用できるようになりました。

練習用ファイルをダウンロード

例えば下のように指定すると要素の全範囲の四角形で切り抜くことになります。
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);

 

0 0はX軸が0, Y軸が0の点を示しています。（下図の青い点）
100% 0はX軸が100%, Y軸が0の点を示しています。（下図の緑色の点）
100% 100%はX軸が100%, Y軸の点を示しています。（下図の黄色の点）
0 100%はX軸が0, Y軸が100%の点を示しています。（下図のオレンジの点）

 

簡単に作れるサイトを利用しよう

ここではクリップパスが簡単に作れるサイトを利用して作成していきます。

CSS clip-path maker Clippy

まずは四角に近い形を選んで角度を調整し、クリップパスの値をコピー・ペーストするだけです。


01 左側を15%下に下げる

CSS

.slant-bg1{
width: 100%;
padding: 100px 0;
clip-path: polygon(0 15%, 100% 0%, 100% 85%, 0% 100%);
background-color: #f1c122;
}

HTML

<div class="slant-bg1">
<div class="container">
<h2>slant-bg1</h2>
<p>テキスト</p>
</div>
</div>


slant-bg1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.



02 右側を15%下に下げる

CSS

.slant-bg2 {
width: 100%;
padding: 100px 0;
clip-path: polygon(0 0, 100% 15%, 100% 100%, 0 85%);
background-color:#ff6347;
}

HTML

<div class="slant-bg2">
<div class="container">
<h2>slant-bg2</h2>
<p>テキスト</p>
</div>
</div>

slant-bg2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.



03 右側を15%上下小さく＋背景画像を入れる

CSS

.slant-bg3 {
width: 100%;
padding: 100px 0;
clip-path: polygon(0 0, 100% 15%, 100% 85%, 0 100%);
background-image:url("img/bg.jpg");
background-size: cover;
}

HTML

<div class="slant-bg3">
<div class="container">
<h2>slant-bg3</h2>
<p>テキスト</p>
</div>
</div>

slant-bg3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.



04 自由に変形　＋　画像のパターン

CSS

.slant-bg4 {
width: 100%;
padding: 100px 0;
clip-path: polygon(100% 0, 100% 100%, 50% 80%, 0 100%, 0 0);
background-image:url("img/dot.png");
background-repeat: repeat;
}

HTML

<div class="slant-bg4">
<div class="container">
<h2>slant-bg4</h2>
<p>テキスト</p>
</div>
</div>

slant-bg4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.



05 Bacgroundだけじゃない！！

clip-pathで色々な図形を作ろう

Hello！

自由に作ってみよう！


CSS

/* 三角　*/
.sankaku5 {
width: 100px;
height: 80px;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
background-color: red;
}

/* 逆三角　*/
.sankaku6 {
width: 100px;
height: 80px;
clip-path: polygon(100% 0, 0 0, 50% 100%);
background-color: darkorange;
}

/* 矢印　*/
.arrow7 {
width: 100px;
height: 100px;
clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);
background-image:url("img/dog.jpg");
}

/* メッセージ　*/
.message8 {
width: 100px;
padding: 20px;
text-align: center;
clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
background-color:#87ceeb;
}

横に並べる場合
.naraberu{
display:flex;
flex-wrap: wrap;
justify-content: space-around;
}

HTML

<div class="sankaku5"></div>
<div class="sankaku6"></div>
<div class="arrow7"></div>
<div class="message8">Hello！</div>


横に並べる場合
<div class="naraberu">
<div class="sankaku5"></div>
<div class="sankaku6"></div>
<div class="arrow7"></div>
<div class="message8">Hello！</div>
</div>