CSSで三角形を作ろう｜さまざまな実例をコード付きで解説

（最終更新日：2023年12月）

✔当記事は以下のような方に向けて読むべき内容となります

「CSSで三角形をどう作ればいいか知りたい」
「CSSで三角形の描き方の詳細が学びたい」
「具体的な実例を通じて、CSSでの三角形の作り方を理解したい」

✔当記事を通じて学んでいただくこと

• CSSを用いた三角形の基本的な作り方
• 多様なCSSのコードによる三角形の描き方と応用例
• 三角形の作成におけるCSSの活用例

当記事では、CSSで三角形を作成する基本的な方法から、さまざまなオプションを駆使した応用まで、事例を通じて詳細に解説します。

最後までお付き合いいただければと思います。

CSSによる三角形作成の基本

こちらでは、「CSSによる三角形作成の基本」についてお伝えしていきます。

CSSを使って三角形を描く技術を身につけることで、Webデザインの幅が広がるでしょう。

• CSSと三角形の関係性
• CSSにおけるborderの重要性

CSSと三角形の関係性

CSSでは、四角形を主としたレイアウトが基本ですが、実はborderプロパティを使い、三角形の表現が可能です。

borderの幅を変えることで、三角形の形状を操作できます。

この方法を覚えると、Webページにおけるデザインパターンが増え、より表現力豊かなWebページを作成できます。

CSSにおけるborderの重要性

CSSにおけるborderは、要素の周囲を囲む線を描画するために使用されますが、特定の辺だけに太さを指定することで三角形を作成できます。

具体的には、上下左右のborderのうち一つだけに太さを指定して、残りの辺を透明にし、三角形が描画できるのです。

このborderを用いた描画方法は、三角形の向きを自由に変えることができるため、さまざまな場面で活用できます。

四方向（上下左右）への三角形の描き方

まずは、四方向（上下左右）への三角形の描き方について説明します。

このテクニックを習得することで、Webページのデザインにおけるアクセントや、矢印としての利用など、さまざまな応用が可能です。

• 上向き三角形の作成方法とその調整方法
• 右向き三角形の作成方法
• 下向き三角形の作成方法
• 左向き三角形の作成方法

上向き三角形の作成方法

上向きの三角形は、下辺のborderに太さを指定し、左右と上のborderを透明にすることで作成できます。

具体的なコードは以下の通りです。

.triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

この三角形の高さと底辺の長さはborderの太さで調整できます。

透明なborderの幅が底辺、色付きのborderの高さが三角形の高さです。

• 底辺と高さの調整方法
• 正三角形にする方法

底辺と高さの調整方法

三角形の底辺と高さは、それぞれborder-leftとborder-right、border-bottomの値を調整することで変更可能。

底辺はborder-leftとborder-rightの幅の合計、高さはborder-bottomの値です。

具体的なコードは以下のとおり。

.triangle-up {
    border-left: 30px solid transparent; /* 底辺の半分 */
    border-right: 30px solid transparent; /* 底辺の半分 */
    border-bottom: 60px solid red; /* 高さ */
}

正三角形にする方法

正三角形は、底辺と高さが同じ値になるように設定することで描画できます。

このとき、底辺はborder-leftとborder-rightの合計値、高さはborder-bottomの値です。

具体的なコードは以下のとおり。

.triangle-up {
    border-left: 50px solid transparent; /* 底辺の半分 */
    border-right: 50px solid transparent; /* 底辺の半分 */
    border-bottom: 100px solid red; /* 高さ */
}

右向き三角形の作成方法

右向きの三角形は、左辺のborderに太さを指定し、上下と右のborderを透明にすることで作成できます。

具体的なコードは以下のとおりです。

.triangle-right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 100px solid red;
}

この方法も、上向き三角形と同様にborderの太さを変えることで三角形の大きさを調整できます。

下向き三角形の作成方法

下向きの三角形は、上辺のborderに太さを指定し、左右と下のborderを透明にすることで作成できます。

具体的なコードはこちら。

.triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}

この方法も、上向き三角形と同様にborderの太さを変えることで三角形の大きさを調整できます。

左向き三角形の作成方法

左向きの三角形は、右辺のborderに太さを指定し、上下と左のborderを透明にします。

具体的なコードは以下のとおりです。

.triangle-left {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-right: 100px solid red;
}

この方法も、上向き三角形と同様にborderの太さを変えることで三角形の大きさを調整できます。

斜め方向の三角形の描き方

こちらでは、斜め方向の三角形の描き方について説明します。

斜め方向の三角形は、四方向の三角形を組み合わせることで作成可能です。

• 斜め右上の三角形の作成と応用
• 斜め右下の三角形の描き方
• 斜め左下の三角形の描き方
• 斜め左上の三角形の描き方

斜め右上の三角形の作成と応用

斜め右上の三角形は、上向き三角形と右向き三角形を組み合わせることで作成します。

具体的なコードは以下のとおりです。

.triangle-right-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-bottom: 50px solid red;
}

この三角形の大きさと方向は、borderの太さと色を調整することで自由に変更することが可能です。

• 色指定のパターンと違い
• 底辺と高さの決め方
• 一風変わった形の作成方法

色指定のパターンと違い

CSSにおける三角形の色指定は、一般的にはborderの色指定と同じ方法を用います。

ただし、斜めの三角形を描く際は、上向きと右向きのborderの色を同時に指定することで、右上向きの斜め三角形を描くことが可能です。

この特性を利用すると、独特なデザイン表現が可能となります。

底辺と高さの決め方

斜め右上の三角形の底辺と高さは、border-leftとborder-bottomの太さで決定します。

底辺はborder-leftの幅、高さはborder-bottomの値。

これらの値を調整することで、三角形の大きさと形状を自由に変更することが可能です。

一風変わった形の作成方法

斜め右上の三角形の形状を変えることで、一風変わった形の三角形を作成することも可能です。

例えば、border-leftとborder-bottomの値を大きく変えることで、細長い三角形を作成できます。

このような特性を利用することで、独自のデザイン表現が可能です。

斜め右下の三角形の描き方

斜め右下の三角形は、下向き三角形と右向き三角形を組み合わせることで作成します。

具体的なコードは以下のとおりです。

.triangle-right-down {
    width: 0;
    height: 0;
    border-left: 50px solid red;
    border-top: 50px solid transparent;
}

この三角形も、borderの太さと色を調整することで、三角形の大きさと色を自由に変更することが可能です。

斜め左下の三角形の描き方

斜め左下の三角形は、下向き三角形と左向き三角形を組み合わせることで作成します。

具体的なコードはこちらです。

.triangle-left-down {
    width: 0;
    height: 0;
    border-right: 50px solid red;
    border-top: 50px solid transparent;
}

この三角形も、borderの太さと色を調整することで、三角形の大きさと色を自由に変更が可能です。

斜め左上の三角形の描き方

斜め左上の三角形は、上向き三角形と左向き三角形を組み合わせることで作成します。

具体的なコードは以下の通りです。

.triangle-left-up {
    width: 0;
    height: 0;
    border-right: 50px solid transparent;
    border-bottom: 50px solid red;
}

この三角形も、borderの太さと色を調整することで、三角形の大きさと色を自由に変更することが可能です。

CSSでの矢印描画の方法

矢印は主にナビゲーションや指示を示す場合に使用されます。

四方向および斜め方向の矢印は、先に述べた三角形の組み合わせと、追加の矩形（長方形）を使い、作成が可能。

たとえば、右向き矢印は以下のようなコードで作成します。

.arrow-right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 100px solid red;
}

.arrow-right:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 50px solid red;
    position: relative;
    left: -100px;
    top: -25px;
}

このような手法を用いて、上下左右、そして斜めの矢印を描くことも可能です。

この応用法を覚えることで、より表現力豊かなWebページデザインが可能となります。

まとめ

こちらでは、CSSを用いて三角形と矢印の描画方法について詳しく解説しました。

三角形は単体で使うだけでなく、組み合わせることで矢印などのより複雑な形状を作れます。

また、色や透明度を変えることで、表情豊かな表現が可能です。

これらのテクニックを用いて、自分だけのオリジナルなWebページをデザインしてみてください。