【CSS】斜めの帯状背景に画像を横並びに並べる
以下のような、斜めの帯に画像を並べるような表示の実装方法を紹介します。

上記の画像のように斜めに画像を配置して表示します。
斜めに並べただけで少しおしゃれな感じがしますね。
この斜め配置をCSSで表現するとなると結構面倒なのです。。。
斜め背景について調べると、ただ背景を斜めに表示するだけの方法は色々と出てくるのですが、斜め背景を分割して、画像を表示するとなると出てこなかったので残しておきます。
実装方法
サンプルのコードを記事の下部に載せますが、まずはどうやって実装するのか?というのをざっくり説明します。
こういった斜め配置をする場合の考え方として、以下のようにCSSを組みます。
- 斜めにしたい要素をまるごと傾ける。
- 傾けた要素の中にある要素も一緒に傾いてしまうため、今度は中の要素だけを逆方向に傾ける。
これだけです。
全体を傾けて、中にある要素をもとに戻す(逆に傾ける)ことで背景のみが斜めになるというわけですね。
実際にサンプルのHTMLとCSSを見て確認してみましょう。
サンプルコード
以下がサンプルのHTMLとCSSのコードになります。
HTML
<html>
<head>
<link rel="stylesheet" href="naname.css">
</head>
<body>
<div class="naname">
<div class="naname-title">
<h2>斜め画像を並べた背景</h2>
</div>
<div class="naname-back">
<ul class="naname-group-list">
<li class="naname-group">
<div class="naname-img naname-img--1"></div>
<div class="naname-img naname-img--2"></div>
</li>
<li class="naname-group">
<div class="naname-img naname-img--3"></div>
<div class="naname-img naname-img--4"></div>
</li>
</ul>
</div>
</div>
</body>
</html>
CSS
.naname {
padding: 100px 0 300px 0;
background-image: url("images/naname-bg.jpg");
background-size: cover;
background-position: center;
}
.naname-title {
text-align: center;
color: green;
}
.naname-back {
transform: skewY(8deg) translate3d(0, 0, 0);
width: 100%;
height: 400px;
overflow: hidden;
}
.naname-group-list {
height: 100%;
list-style: none;
display: flex;
margin: 0;
padding: 0;
}
.naname-group {
width: 50%;
display: flex;
}
.naname-img {
width: 50%;
height: 120%;
transform: skewY(-8deg) translate3d(0, 0, 0);
transform-origin: center left;
background-size: cover;
background-position: center center;
}
.naname-img--1 {
background-image: url("images/naname-img1.jpg");
}
.naname-img--2 {
background-image: url("images/naname-img2.jpg");
}
.naname-img--3 {
background-image: url("images/naname-img3.jpg");
}
.naname-img--4 {
background-image: url("images/naname-img4.jpg");
}
@media screen and (max-width: 768px) {
.naname-group-list {
flex-wrap: wrap;
}
.naname-back {
height: 800px;
}
.naname-group {
height: 50%;
width: 100%;
overflow: hidden;
}
}
naname-back
を傾けて画像の表示範囲を斜めにします。
その後、naname-back
の中の要素naname-img
を逆方向に傾けることでもとに戻しています。
ちなみにこちら、レスポンシブ対応してます。
ウィンドウの幅を狭くすると以下のように2段の表示になります。

コードの量が多くなってしまうのでベンダープレフィックスは省いてあります。
複数ブラウザに対応する場合は必要に応じてベンダープレフィックスを追加する必要があります。
ベンダープレフィックスをつける場合はAutoprefixerを使うと簡単です。
以上、画像の斜め表示の方法でした。
おしまい。
ディスカッション
コメント一覧
まだ、コメントがありません