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

2024年7月8日

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

ポイント

本記事では、

LPなどでよく見かける下向きの三角形マークの作り方を紹介します。

ばんばん下向きしちゃいましょう！

＼ココナラ成功パターンを詳しく見たい方はこちらをクリックしてください／

1 下向き三角形のサンプル
2 シンプルな下向き三角形の作り方
- 2.1 Step.1. CSS を共通部分に配置する
- 2.2 Step.2. カスタム HTML ブロックで配置する
3 要素（背景）にくっつく下向き三角形の作り方
4 まとめ：下向きの三角形マークを作る方法

下向き三角形のサンプル

Point.

下向き三角形
サンプル

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

単純ですね。

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

ここにプロモーションなどを書く

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

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

Point.

下向き三角形
シンプル

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は共有で定義しているので、同一ページ内や複数のページで使いまわせます）

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

Point.

下向き三角形
下にくっつく

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

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

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

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

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

.mySampleAddTriangle {
  position: relative;
}

.mySampleAddTriangle::after {
  content: '';
  position: absolute;
  bottom: -20px;
  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」要素を使って下に三角形を描いています。