CSS

【CSS】clip-path下向き三角でセクションを区切る方法について解説

※ 当サイトではアフィリエイト広告を利用しています

【CSS】clip-path 下向き三角でセクションを区切る方法

この記事では「clip-path下向き三角でセクションを区切る方法」について解説します。

セクション間を三角形で区切るレイアウトはWebサイトでよく見かけるレイアウトの一つなので、すぐ実装できるようにやり方を覚えておきましょう。

この記事を読むと...
  • clip-path下向き三角でセクション区切る方法について分かる
  • 下向き三角がコピペで実装できる

背景を斜めに区切るレイアウトの実装方法に関しては以下の記事で解説しています。

CSSのclip-path下向き三角でセクション区切る

clip-path下向き三角でセクション区切るコード全文は以下になります。

See the Pen clip-path下向き三角でセクション区切る by 山中滉大 (@tips-web) on CodePen.

  <section class="p-section">
    <div>コンテンツA</div>
  </section>
  <section class="p-section p-section--bgPink p-section--layer">
    <div>コンテンツB</div>
  </section>
.p-section {
  padding: 200px 40px;
  background-color: lightsalmon;
  position: relative;
  z-index: 0;
  text-align: center;
}


.p-section.p-section--bgPink{
  background: pink;
}


.p-section.p-section--layer::after{
  content: "";
  position: absolute;
  height: 50px;
  width: 100%;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  background-color: lightsalmon;
  left: 0;
  top: 0;
  z-index: 1;
}
下向き三角セクション区切り

下向き三角の部分は、以下の疑似要素の部分で作成しています。

.p-section.p-section--layer::after{
  content: "";
  position: absolute;
  height: 50px;
  width: 100%;
 clip-path: polygon(50% 100%, 0 0, 100% 0);
  background-color: lightsalmon;
  left: 0;
  top: 0;
  z-index: 1;
}

以下のような作成イメージになります。

下向き三角でセクション区切る

clip-pathプロパティは以下の値を使ってさまざまな図形を作成することができます。

  • polgon():多角形
  • circle():円形
  • ellipse():楕円形
  • inset():四角形

clip-pathプロパティのコードは、以下のツールを使って簡単に作ることができます。

https://bennettfeely.com/clippy/

右側サイドバーの図形を選択して、左側に表示された図形の頂点の位置を動かすことができます。

図形作成

出力されたclip-pathコードをコピーして、CSSの該当部分に貼り付け。あとは三角形の横幅と高さを与えてやれば簡単に三角形を作ることができます。

もちろん、三角形だけではなく台形や平行四辺形などの図形も上記のツールで作成することができます。

出力されたclip-pathプロパティの値は、暗記する必要はありませんが、以下のような意味になります。

clip-path: polygon(50% 100%, 0 0, 100% 0);
/* x座標:50%, y座標:100%とx座標:0,y座標:0とx座標:100%, y座標:0 */

なお、三角形を borderプロパティで作成することもできますが、clip-pathプロパティのほうがツールを使えば簡単に実装できるので、clip-pathプロパティで作成するのがおすすめです。

まとめ

clip-path下向き三角でセクション区切る方法について解説しました。clip-pathプロパティを使えばさまざまな図形を作成することができます。ツールを使うと簡単に実装できるので、活用していきましょう。

  • この記事を書いた人
アバター画像

こうだい

兼業でWeb制作事業|31歳|本業畑違いで知識0から学習開始→1年目で初案件獲得→2年で月の兼業受注金額70万円達成|4年目で100万円達成|兼業でも稼げることを確信|Web制作メンター|制作費無料のホームページ制作事業運営|コーディング・ホームページ制作についてお気軽にお問い合わせください

-CSS
-,