【WordPress】下向きの三角形マークを作る方法（HTML、CSSサンプルあり）

LPページなどでよく見かける下向きの三角形マークを簡単に作る方法です。

下向き三角形のサンプル

シンプルな下向き三角形です

単純ですね。

次に、横一杯の背景（主にカバーブロック）の下に三角形をくっつけてみます。

LPページなどでよく見かける演出になりましたね。

シンプルな下向き三角形の作り方

HTML＋CSSで作ります。コードは以下です。

<div class="mySampleTriangle"></div>

<style>
  .mySampleTriangle {
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 30px solid #000;
    margin: 0 auto;
  }
</style>

border をうまく利用して三角形をCSSで作っています。色や大きさは、数字や #000 などを変えることで変更できます。

WordPress で使う場合は、CSS部分を共通で登録しておき、三角形を利用したい場合に <div> だけ配置するのが一番効率的です。

Step.1. CSS を共通部分に配置する

CSS（style ～ /style）は、追加CSS（WordPress の管理画面から「外観」→「カスタマイズ」→「追加CSS」に配置します。

CSS（style ～ /style ※ style タグは書かない）を、設置します。

Step.2. カスタム HTML ブロックで配置する

実際に下向きの三角形を配置する場合は、「カスタムHTML」ブロックで配置します。

<div class="mySampleTriangle"></div>

下向き三角形の本体の <div> タグ（だけ）を埋め込みます。（CSSは共有で定義しているので、同一ページ内や複数のページで使いまわせます）

要素（背景）にくっつく下向き三角形の作り方

下にくっつく下向き三角形は、先にクラスを定義しておいて、要素に対して（先に作った）クラス名をつけると自動的に三角形が付くように作るのが便利です。

クラスは「追加CSS」に配置します。

Step.1. CSS を共通部分に配置する

CSS を、追加CSS（WordPress の管理画面から「外観」→「カスタマイズ」→「追加CSS」）に配置します。

以下のコードを追加します。

.mySampleAddTriangle {
  position: relative;
}

.mySampleAddTriangle::after {
  content: '';
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #000;
}

mySampleAddTriangle クラスが付いている要素を 「position: relative;」で相対位置の基本位置として設定し、「after」要素を使って下に三角形を描いています。

Step.2. ブロック要素に下向き三角形をつける場合

WordPress で利用したブロックに下向き三角形をつける場合、ブロックを「グループ化」して、グループに（先ほどCSSで定義した）クラス名「mySampleAddTriangle」を付与します。

下向き三角形をつけたいブロックをグループ化します。（カバーブロック１個だったとしても、グループ化します）

作成したグループに追加CSSで定義したクラス名を設定します。

Step.3. 下三角形が付くことを確認する

編集画面では下向き三角形は表示されないので実際にページを表示して確認します。

ちゃんと下向きの三角形が表示されていれば成功です（表示されなければグループ化の選択場所など何かが間違っています）。

CSSは共有で定義しているので、下向き三角形をつけたいブロックに対してグループ化してクラス名をつけることで、同一ページ内や複数のページでも使いまわすことが可能です。

まとめ：下向きの三角形マークを作る方法

下向きの三角形マークはLPページでプロモーションをおすすめする帯を作る場合などによく使いますね。HTML＋CSSで簡単に作れますので、CSSを共有で定義しておくと便利です。

より表現を工夫して、よりよいサイトを作ってくださいね。