【CSS】斜めの帯状背景に画像を横並びに並べる

2020年5月17日

以下のような、斜めの帯に画像を並べるような表示の実装方法を紹介します。

上記の画像のように斜めに画像を配置して表示します。

斜めに並べただけで少しおしゃれな感じがしますね。

この斜め配置を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段の表示になります。