CSS

CSS|境目のところが下向きの三角形みたいになっているWEBページを作ってみた

よくランディングページなどで見かける、こういうページをスタイルシートで作ってみたので共有します。画像は使っていません。

ボタンで表示を切り替えてご覧ください。

See the Pen
LP_triangle_bottom
by kenichi (@ken81)
on CodePen.

HTML

<div class="triangle01">
  <section>
    <h2>見出し1</h2>
    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  </section>
</div>
<div class="triangle02">
  <section>
    <h2>見出し2</h2>
    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  </section>
</div>
<div class="triangle03">
  <section>
    <h2>見出し3</h2>
    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  </section>
</div>

CSS

body{
  margin: 0;
}
h2{
  max-width: 600px;
  margin-right:auto;
  margin-left: auto;
  margin-top: 0;
  padding-top: 1em;
}
p{
  max-width: 600px;
  margin-right:auto;
  margin-left: auto;
  padding-bottom: 1em;
  margin-bottom: 0;
}
section{
  padding: 1em;
}
[class^="triangle"]{
  position: relative;
}
[class^="triangle"]::after{
  position: absolute;
  content: "";
  box-sizing: border-box;
  border-right: 50vw solid transparent;
  border-left: 50vw solid transparent;
  z-index: 10;
}
[class^="triangle"] + div{
  padding-top: 100px;
}
.triangle01{
  background: #C2E5FB;
}
.triangle01::after{
  border-top: 80px solid #C2E5FB;
}
.triangle02{
  background: #DDFCD0;
}
.triangle02::after{
  border-top: 80px solid #DDFCD0;
}
.triangle03{
  background: #FCFBCE;
}
.triangle03::after{
  border-top: 80px solid #FCFBCE;
}

作り方は、下記の三角形の作り方の原理を応用してます。

スタイルシートを編集していてネックになったのが、borderの幅がパーセントで指定できなかったという点です。パーセントで指定できれば左右を50%にするだけで完成できそうですが、それができなかったので50vwで指定してあります。vwというのは、画面の表示領域全体の幅に対する割合でサイズを指定する単位です。

上記の理由から、ページの両サイドに余白を入れずに100%で表示させることを想定してありますので、余白を入れてしまうと三角形の先端がずれてしまうのをお気をつけください。

最近の記事

  1. CSS

    要素の配置が簡単に決まるFlexboxの使い方
  2. CSS

    レスポンシブウェブデザインの基本|メディアクリエリの設定
  3. CSS

    CSS|中央寄せが効かないときは・・・
  4. CSS

    擬似クラス「:first-child」「:last-child」はどうして効かな…
  5. WordPress

    WordPressの立ち上げからサイト構築までの初期手順
PAGE TOP