DESIGN REMARKS [デザインリマークス]

WEBデザインで三角形を作る方法まとめ

yusuke

WEBサイトのデザインで三角形を作る方法をまとめます。

方法は大きく分けて、下記の3パターンがあります。

それぞれの方法と、使いどころ、メリットデメリットを解説していきます。

画像で三角形を作る方法

画像で作る方法が最も確実で自由度が高いです。

確実というのは、ブラウザによって表示されないとか崩れてしまうという心配が少ないためです。
自由度が高いのは、PhotoshopやIllustratorでデザインして書き出したものを、そのまま使えるためです。

使い方は以下の2通りです。
HTMLで、<img src= “〇〇〇.jpg”>要素を使う。
CSSで、background-image:url(“〇〇〇.jpg”);というプロパティを使う。

画像の形式は下記の物があり、それぞれ特性があります。

jpeg画像
写真画像に最適な最も一般的な画像形式です。三角形のような色数が少ないシンプルな図形の場合には、これ以外の画像形式が適しています。
PNG画像
透明度を使うことができる画像です。
Gif画像
Gifアニメーションという動く画像を作れる形式です。
SVG画像
ベクターで作られているので、どれだけ拡大しても荒れることのない画像形式です。

SVG画像に関しては、〇〇.svgという画像ファイルとして扱う以外に、SVGスプライトという手法があります。これについてはこちらの記事に詳細をまとめています。
図形を色を変えるなどして何度も使いまわすには最適な手法になります。

これら画像ファイルでの手法は自由度が高く、三角形に限らずどんな図形でも使えます。

CSSで三角形を作る方法

CSSだけで三角形を表現する方法です。

borderを使って三角形を作る

これは、borderプロパティを使った特殊な方法になります。
基本的な考え方としては下記の方法になります。

borderの角は斜めになっていて、
ゼロサイズの要素にborderを付けて上下左右の色を変えると三角形になる。

実例は以下になります。以下の図形はCSSのborderで出来ています。

<!-- HTML -->
<div class="test">
</div>

<!-- CSS -->
div.test{
    height: 0;
    width: 0;
    border: solid 20px transparent;
    border-top-color: red;
    border-bottom-color: yellow;
    border-left-color: green;
    border-right-color: orange;
    box-sizing: border-box;
}

お解り頂けますでしょうか。
要素のサイズよりもborderの線が太いことによって、borderの線自体が一つの要素のようになり、なおかつ上下左右の境目が斜めになっているため、色を変えると三角形になります。

これを特性を使い、上下左右のどれか1つだけ色を付けて、他を透明にすることで三角形を作り出せます。

<!-- HTML -->
<div class="test2">
</div>

<!-- CSS -->
div.test2{
    height: 0;
    width: 0;
    border: solid 20px transparent;
    border-top-color: red; //上の線だけに色を付ける
    box-sizing: border-box;
}

transformを使って三角形を作る

CSSだけで三角形を作るならborderの他にtransformを使って作ることもできます。

例えば、四角形をtransform:rotate(45deg);でひし形にして半分を隠す、などの方法です。

<!-- HTML -->
<div class="test3">
</div>
<!-- CSS -->
div.test3{
    position: relative;
    width: 200px;
    height: 30px;
    background-color: blue;
}
div.test3::after{
    display: block;
    content: "";
    position: absolute;
    bottom: -15px;
    left: 0;
    right: 0;
    margin: auto;
    width: 30px;
    height: 30px;
    background-color: blue;
    transform: rotate(45deg);
}
</style>

単純な図形しか作れない割にCSSが複雑になるので、個人的には他の方法の方が良いと思います。

テキストで三角形を作る方法

テキストで三角形を表示する方法は2つです。

普通にテキストで“三角形”や“記号”と入力して変換する方法と、
実態参照で三角形を表示する方法です。

“三角形”や“記号”と入力して変換 する方法

一番簡単で簡易的な方法と言えるでしょう。

▶　▲　▽　▼

これらが普通に変換した三角形ですが、閲覧環境によって見た目が変わってしまう可能性があるものになります。簡易的な記号としては良いですが、それ以外は使わない方が良いでしょう。少なくともデザイン要素としては不適切です。

「数値文字参照」を使う方法

HTMLにおいて三角形記号を表示する際には、数値文字参照を使うのが一般的であり、安全な方法です。

数値文字参照 は10進数と16進数の2つの方法があり、三角形であれば、以下のような記述になります。(他にも色々な記号があります)

10進数
▲ &#9650; | ▼ &#9660; | ▶ &#9654; | ◀ &#9664;

16進数
▲ &#x25B2; | ▼ &#x25BC; | ▶ &#x25B6; | ◀ &#x25C0;

さらに、この 「数値文字参照」 はCSSのcontent:””;要素に使うことができ、リストの見出しやリンクボタンのスタイルで非常に便利に使えます。

しかし、 content:””;要素 で使う場合には特殊な変換が必要になります。

//contentで数値文字参照を使う場合の記述例
div.test4::after{
　content: "\025b2";
}

実体参照や数値文字参照からのcontent要素への変換はこちらのサイトが参考になります。

結果的に主要な三角形は以下のような一覧表になります。

記号10進数16進数content種類
▲&#9650;&#x25B2;\025b2黒三角
▼&#9660;&#x25BC;\025bc逆黒三角
▶&#9654;&#x25B6;\025b6右向黒三角
◀&#9664;&#x25C0;\025c0左向黒三角

この実体参照を使ったとしても、テキスト文字で三角形などの記号を表現する場合はOSやブラウザなどの環境によって表示が変わってします。デザイン要素としての使用には向いていません。

それぞれの表現手法の使い所とその他の方法

三角形に特化していくつかの表現手法をご紹介しました。

これらの手法の使い分けは、以下の基準で考えればいいと思います。

  • 三角形のデザインが複雑なら画像表現
  • 1回しか使わないならHTMLにimg要素で入れる
  • 何度も使うならCSSのbackgroundかCSSだけで作る
  • 大きさや色を変えて使いまわすならSVGスプライト
  • 簡易的な表現の時はテキスト文字

また、今回紹介した手法以外にも、フォントやプラグインを使った方法もあります。

例えば、GoogleのMaterial Icons（マテリアルアイコン）やフォントオーサムなどです。

三角形だけ使いたい場合には必要ないと思いますが、様々な記号を使いたい場合に便利なものになります。

表現内容に合った適切な手法で、効率的なデザインを目指しましょう。

モバイルバージョンを終了