1. ホーム
  2. CSS
  3. 【CSS】CSSのみで三角と矢印を作る方法

【CSS】CSSのみで三角と矢印を作る方法

目次

  1. はじめに
  2. 三角の作り方
  3. 矢印の作り方
  4. まとめ

CSSを使った三角と矢印の作り方

はじめに

本記事ではCSSのみを使って三角や矢印を作る方法をご紹介します。
すでに三角や矢印を作れる方でも、「実際にはコードの中身の仕組みがよくわかっていないんだよね〜」という方もいらっしゃるんではないでしょうか?

今回はそんな方に向けて細かい解説を交えながらご紹介します!

三角の作り方

CSSを使った三角と矢印の作り方

こちらは実際にCSSで作成した三角です。
HTMLコード:

<div class="triangle">
</div>
<div class="triangle1">
</div>
<div class="triangle2">
</div>
<div class="triangle3">
</div>

CSSコード:

.triangle{
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 30px solid black;
}
.triangle1{
width: 0;
height: 0;
border-left: 30px solid black;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
}
.triangle2{
width: 0;
height: 0;
border-top: 30px solid transparent;
border-right: 30px solid black;
border-bottom: 30px solid transparent;
}
.triangle3{
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-top: 30px solid black;
}

ここまではご存知の方も多いと思います。
では、実際にこのコードはどういう仕組みで動いているのでしょうか。

まずは単純にボーダーがある<div>タグを想像してください。

CSSを使った三角と矢印の作り方

かなり太めのボーダーがある<div>タグですね。

次に、それぞれのボーダーの色を変更してみます。

CSSを使った三角と矢印の作り方

このような状態になりました。
それぞれの角でボーダーが斜めに切れていますね。

では、次にこのボックスの幅と高さを0にしてみます。

CSSを使った三角と矢印の作り方

そうすると不思議ですが、三角が4つ固まって1つの四角を形成しているように見えます。
それでは、1つのボーダーを残して、それぞれのボーダーを「transparent」(透明)にしてみます。

まず、上のボーダーを透明にします。

CSSを使った三角と矢印の作り方

左のボーダーを透明にします。

CSSを使った三角と矢印の作り方

最後に、右のボーダーを透明にします。

CSSを使った三角と矢印の作り方

これで三角ができました!

例えば、上むきの三角を作りたい場合、一番下のボーダーのみを表示したいので、border-bottomに対して色をかけてみてください。

参考:

.triangle{
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 30px solid aqua;
}

POINT!!

`border-bottom` にかける場合、`border-top`への指定は省くことができます。
同様に、`border-left` にかける場合、`border-right`への指定は省くことができます。CSSコードをシンプルにするためには、色をかけるボーダーの真反対のボーダーへのしては省くと良いと思います。

また、参考までに、このように書くこともできます。

.triangle{
width: 0px;
height: 0px;
border: 30px solid;
border-color: transparent transparent aqua transparent;
}

border-colorプロパティは複数の値を指定すると、順番に上、右、下、左のボーダーの色を指定することができるので、「もう少しコードをスッキリと書きたい!」という方にはオススメです。

矢印の作り方

次の矢印の作り方をご紹介します。
今回ご紹介する矢印は非常にシンプルですが、一番よく使う形です。

CSSを使った三角と矢印の作り方

HTMLコード:

<div class="arrow">
</div>
<div class="arrow1">
</div>
<div class="arrow2">
</div>
<div class="arrow3">
</div>

CSSコード:

.arrow{
width: 30px;
height: 30px;
border: 5px solid;
border-color: #565656 #565656 transparent transparent;
transform: rotate(45deg);
}
.arrow1{
width: 30px;
height: 30px;
border: 5px solid;
border-color:  transparent transparent #565656 #565656;
transform: rotate(-45deg);
}
.arrow2{
width: 30px;
height: 30px;
border: 5px solid;
border-color: #565656 #565656 transparent transparent;
transform: rotate(-45deg);
}
.arrow3{
width: 30px;
height: 30px;
border: 5px solid;
border-color:  transparent transparent #565656 #565656;
transform: rotate(45deg);
}

こちらの仕組みはどうなっているのか、コードを読みといて気がついている方もいらっしゃるかもしれませんね。

まずは三角と同じようにボーダー付きの<div>タグを作成します。

CSSを使った三角と矢印の作り方
次に隣り合わせのボーダーを2辺透明 (transparent) にします。

CSSを使った三角と矢印の作り方

あとはこちらをtransformプロパティを使用して45度回転させます。


transform: rotate(45deg);

CSSを使った三角と矢印の作り方

このような感じで矢印を作ることができます。

まとめ

この記事を通して、CSSのみで三角と矢印を作る方法をご紹介しました。
コードをそのままコピペして使っていると、なんだか難しそう…と思いがちですが、中身を見ると、普通の四角い<div>タグやボーダーを応用しているだけで、そこまで難しい技術を使用していません
応用編として、CSSで作った三角や矢印をバウンドさせるアニメーションを作成しても使えるかもしれません。

この記事は
参考になりましたか?

PAGE TOP