【CSS】transform skewで背景を斜めに表示させる

この記事をシェアする

スポンサードリンク

斜めな感じのアイキャッチ画像

下のデモのような、斜めにに背景画像を表示させる方法です。

DEMO

※デモはPCのみ対応

こんな感じのサイト、よく見かけますね。

HTML

<div class="container">
<div class="content1">
~省略~
</div>
<div class="bg-image"></div>
<div class="content2">
~省略~
</div>
</div>

 

CSS

.content1,
.content2 {
position: relative;
z-index: 2;
}
.bg-image {
position: relative;
width: 100%;
height: 0;
padding-bottom: 80%;
background-image: url(./image.jpg);
background-position: center;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
z-index: 1;
}
.bg-image::before,
.bg-image::after {
content: '';
position: absolute;
left: 0;
width: 100%;
height: 0;
padding-bottom: 40%;
background-color: #fff;
-webkit-transform: skewY(8deg);
transform: skewY(8deg);
z-index: 1;
}
.bg-image::before {
top: -40%;
box-shadow: 2px 2px 2px rgba(0,0,0,.4);
}
.bg-image::after {
bottom: -40%;
}

 

念のためにプレフィックスを入れてます。

細かい数値は調整して使って下さい。

このように、transform: skew で要素を斜めに変形させることができます。

transform: skew(X軸の傾き, Y軸の傾き); //傾きの単位はdeg
transform: skewX(傾き);
transform: skewY(傾き);

使いどころは限られているかもしれませんが、覚えておいて損はないでしょう。

アクセントに使って下さい。

ちなみにbackground-attachment:fixed;はスマホには対応してないので、別途対応して下さい。今回は割愛します。

スポンサードリンク

<Illustratorでポリゴンのパターンを作る

【WordPress】1カラムの記事投稿用テンプレートを作成する方法>

この記事をシェアする