HOME / ブログ一覧 / セクション区切りが斜めのデザインを作成する

カテゴリーを表示するボタンもっと見る

カテゴリーを非表示するボタン閉じる

セクション区切りが斜めのデザインを作成する

WEBデザインを作成するにおいて、通常はセクションの区切りは水平にすることが多いかと思いますが、
セクションを斜めに区切っているサイトをたまに見かけます。
印象としては、よりシャープで前衛的、という印象を受けます。
今回、自分のデザインでもこの斜めレイアウトを採用する機会がありました。
ということで方法についてご紹介します！

斜めレイアウトを実装する方法は3つある

斜めレイアウトを実装する方法は具体的に次の3つがあります。

・clip-pathを使用する
・borderを利用した三角形を使用する
・transform:skewYを利用する

今回ご紹介する方法でセクションの区切りを斜めにしたサンプルを作成しました。（こちら）
それぞれを具体的にみていきたいと思います！

clip-pathを使用する

CSSのclip-pathプロパティを使用する方法です。
このプロパティはクリッピング領域を作成して、その内部を切り抜いて表示できるものですが、今回はclip-pathプロパティが持っている基本シェイプの関数「polygon」を使用します。
具体的には以下のようにセクションエリアを形成する4つの頂点を座標で指定指定します。

clip-path: polygon(0 100px, 100% 0, 100% 400px, 0 100%);

そして、サンプルに記載している実際のコードはこちらです。


<section class="clip-path">
  <h2>セクション「clip-path」</h2>
  <p>このセクションの区切りは「clip-path」で作成しています。</p>
  
</section>



.clip-path{
  height: 500px;
  color:#333;
  background-color: #aaa;
  -webkit-clip-path: polygon(0 100px, 100% 0, 100% 400px, 0 100%);
  clip-path: polygon(0 100px, 100% 0, 100% 400px, 0 100%);
  text-align: center;
}

ただし、このclip-pathプロパティはIE11には対応していません。
この記事を記載している時点での対応状況ですが、Microsoft社が2022年6月でIEのサポート終了を発表していることから、
今後も対応しないのではないかと考えています。

borderを使用した三角形を使用する

続いての方法はCSSのborderプロパティを使用して三角形を作成し、その三角形を擬似要素のbeforeとafterでセクションの前後にposition:absoluteで配置する方法です。
実際のコードはこちらです。


<section class="border-triangle">

  <h2>セクション「borderを使用した三角形」</h2>
  <p>このセクションの区切りは「borderを使用した三角形」で作成しています。</p>
  
</section>
  


.border-triangle{
  position: relative;
  height:500px;
  color:#fff;
  background-color: #333;
  text-align: center;
  margin-top: 200px;
}
.border-triangle::before{
  content: '';
  position: absolute;
  top: calc(100vw * -0.1);
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 calc(100vw * 0.1) 100vw;
  border-color: transparent transparent #333 transparent;
  z-index: 2;
}
.border-triangle::after{
  content: '';
  position: absolute;
  bottom: calc(100vw * -0.1);
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 calc(100vw * 0.1) 100vw;
  border-color: transparent transparent transparent #333;
  z-index: 2;
}

ポイントはボーダーの太さ（border-width）を100vwにすることです。
100vwにすることで三角形を画面幅いっぱいに配置することができます。
ただし、100vwを使う場合はスクロールバーの幅を含むので次の画像のように少しだけbodyの幅をはみ出してしまいます。
（この際、横スクロールが生じてしまいます）

そもそも100vwを使用せず100%にする、など回避策は考えられるのですが、
今回はbodyタグにoverflow-x:hiddenを指定して、はみ出した部分を表示しないようにしています。

transform:skewYを利用する

3つ目の方法はtransform:skewYを使用します。
このプロパティは要素をY軸（縦軸）方向に傾斜させます。
実際のコードはこちらです。


<section class="translate-skewY">
  <div class="translate-skewY__bg"></div>

  <h2>セクション「translate:skewY」</h2>
  <p>このセクションの区切りは「translate:skewY」で作成しています。</p>
  
</section>



.translate-skewY{
  position: relative;
  text-align: center;
  margin-top: 200px;
  color:#fff;
}

.translate-skewY__bg{
  position: absolute;
  top: 0;
  width: 100vw;
  height:500px;
  background-color: navy;
  transform: skewY(-8deg);
  z-index:  -1;
}

この方法で注意すべきは、セクション自体をtransform:skewYで傾斜させてしまうと、内部の文字、画像などの要素も一緒に傾斜してしまう点です。
なので、セクションの外に背景用に要素を準備して、それをposition:absoluteでセクションに対して絶対配置します。

まとめ

いかがだったでしょうか。
3つの方法のどの方法が良いかは人それぞれの判断があるかと思います。
私個人としては「borderを使用した三角形」での実装が一番やりやすいと感じました！

最後までお読み頂き、ありがとうございました！

ブログ記事一覧へ