CSSで背景を斜めに区切る方法（レスポンシブ可）

背景を斜めに区切ったレイアウトにする方法を紹介します。
色々なやり方がありますが、画像を使わずCSSのみでできる２パターンを紹介します。

目次

• 参考サイト例
• borderを使った方法
• transform: skew を使った方法
• 最後に

参考サイト例

斜めに区切るレイアウトを使っているサイトをピックアップしてみました。
よければご覧ください。

・有休調整さん presented by Club Med×調整さん

・+graph Cloud & Agent

実装方法

borderを使った方法

borderで三角形を作る仕組みを利用して、セクション間に配置する方法です。
セクションに擬似要素（before,after）で三角形を作ります。

背景画像を使った方法と同じく、ブラウザサイズによって、三角形の形が多少伸縮するので、角度が変わると困る場合は 気をつけてください。

※三角形の作り方が よくわからない人は、「三角形の作り方」を書いているページがあるので、ご覧ください。
「CSSで三角形をつくる方法 | たねっぱ！」

    <div class="section1">
      <p>コンテンツ</p>
    </div>

    <div class="section2">
      <p>コンテンツ</p>
    </div>
    

    .section1,
    .section2{
      /*レイアウト用のCSS*/
      padding: 50px;
    }
    .section1{
      position: relative;

      /*レイアウト用のCSS*/
      background-color: pink;
    }
    .section1::before{
      content:"";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 0;
      border-style: solid;

      /*ここで三角形のサイズを決める。
      必ず幅100vwにして、ブラウザサイズいっぱいにしてください。*/
      border-width: 0 0 100px 100vw ;

      border-color: transparent transparent #fff transparent;
    }
    

transform: skew を使った方法

transform: skew を使って、セクションの擬似要素に平行四辺形を作り、配置する方法です。

    <div class="section1">
      <p>コンテンツ</p>
    </div>

    <div class="section2">
    	<p>コンテンツ</p>
    </div>
    

    .section1,
    .section2{
      padding: 50px 30px;
    }

    .section1 {
      background:pink;
    }
    .section2 {
      position: relative;
      z-index: 0;
    }
    .section2::after{
      content: '';
      position: absolute;
      left:0;
      top: 0;

      /*四角形を傾けます*/
      transform: skewY(-5deg);
      transform-origin: bottom left;

      z-index: -1;
      width:100%;
      height:100%;
      background:#fff;
    }
    

最後に

webサイトではよく見かけるレイアウトなので、チャレンジしてみてください♪