• Facebook
  • Twitter
  • RSS
月別
コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

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

投稿者アイコン
2019/08/26
書いた人:
rurippa!
カテゴリ:
CSS   HTML
2,427 views

CSSで背景を斜めに区切る方法を紹介します。

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

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

目次

参考サイト例

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

bg_sample_site01

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

bg_sample_site02

+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サイトではよく見かけるレイアウトなので、チャレンジしてみてください♪


この記事を読んだ人はこんな記事も読んでいます