【CSS】clip-pathで自由な形の背景
acquiesce.inc
CSSのclip-pathを使って、背景を斜めに切り抜くレイアウトを紹介します。擬似要素「::after」を利用することで、画像や文章はそのままに、背景だけを自由な形に変更できます。polygon()による形状の指定方法や、Flexboxを使った横並びの配置を、HTMLとCSSのサンプルコード付きで解説します。
HTMLサンプル
<div class="bg-clip-path">
<div class="flex-block">
<figure><img src="images001.jpg" alt="画像"></figure>
<div class="text-unit">
<h3>見出しが入ります</h3>
<p>説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。</p>
</div>
</div>
</div>Clip-pathジェネレーターを使う
clip-path ジェネレーター
STEP
1
形を選択
STEP
2
○をドラッグで自由な形に変更可能
STEP
3
「コードをコピー」をクリック
STEP
4
CSSに貼り付け
STEP
5
コピペで使えるCSSサンプル
/* 背景の設定 */
.bg-clip-path{
position: relative;
isolation: isolate;/* 重なり順 */
}
.bg-clip-path::after{
content: "";
position: absolute;
z-index: -1;/* 重なり順 */
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #A5D0F7;/* 背景色 */
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
-webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}
/* 横並びのレイアウト */
.flex-block {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: 1100px;
margin: 0 auto;
padding: 4rem 0;
}
.flex-block figure {
width: 40%;
margin: 0;
}
.flex-block figure img {
display: block;
width: 100%;
height: auto;
}
.flex-block .text-unit {
width: 55%;
}
なぜ擬似要素を使うのか？
bg-clip-pathのブロックに直接clip-pathを設定すると、見切れてしまう為、
背景だけでなく、親要素の中にある画像や文章もまとめて切り抜きの対象になる。
/* 直接設定したNG例 */
.bg-clip-path{
background-color: #A5D0F7;/* 背景色 */
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
-webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}
【 親要素に指定 】
画像や文章も切り抜かれる
【 擬似要素に指定 】
背景だけを切り抜ける
clip-path解説
clip-path: polygon(
25% 0%,
100% 0%,
75% 100%,
0% 100%
);
この4点を順番につなぐことで、左右が斜めになった平行四辺形を作っている。
なお、clip-path は要素の大きさそのものを変更するわけではない。指定した形の外側を見えなくする仕組み
