【CSS入門】CSSでの三角や矢印の作り方をわかりやすく解説！

プログラミング言語の辞書
2023.07.04

忍者CODEの学習は“実践型”！
だから結果を出せる！

忍者CODE

●初めてIT業界にチャレンジする方
∟はじめての方でも安心して学習できるように、基礎知識から実践的な課題までプロへのロードマップが分かりやすいカリキュラムを採用。
●副業に有利なことを探されている方
∟未経験からでもスキルを習得できる“実践的カリキュラム”と、学習だけでなく受講後もプロのメンターがマンツーマンで徹底的に副業サポートまで行い、受講後は必ず案件をご紹介するプランの副業・案件”保証”プランもあります。
●業界最安級の受講費用で始めやすい
∟月額9,8000円から始められる忍者CODEのプログラミングスクールは業界でも最安級！それでも学習し放題、サポートは無期限・無制限と、プロのメンターとエンジニアを筆頭に、皆さんを徹底的にサポートします。

まずは自分の適性プラン診断から！
適正コース診断

CSSでの三角や矢印の表示方法

borderを使用した三角の作成

borderプロパティを使用して三角形を作成する方法は以下の通りです。

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

上記のコードでは、.triangleクラスに三角形のスタイルを適用しています。

要素の幅と高さを0に設定し、borderプロパティを使用して三角形の形状を作り出しています。左右の辺は透明にしており、底辺は指定した色（ここでは#000、つまり黒）で塗りつぶされます。

::beforeや::afterを使用した矢印の作成

次に、::beforeや::afterといった疑似要素を使用して矢印を作成する方法を見ていきましょう。

.arrow {
　position: relative;
}

.arrow::before,
.arrow::after {
　content: "";
　position: absolute;
　width: 0;
　height: 0;
}

.arrow::before {
　border-left: 10px solid transparent;
　border-right: 10px solid transparent;
　border-bottom: 10px solid #000;
　top: -10px;
}

.arrow::after {
　border-left: 8px solid transparent;
　border-right: 8px solid transparent;
　border-bottom: 8px solid #fff;
　top: -8px;
}

上記のコードでは、.arrowクラスに矢印のスタイルを適用しています。まず、要素にposition: relative;を指定しています。これにより、::beforeや::afterの位置を要素内で指定できるようになります。

::beforeと::afterの疑似要素は、content: "";で空の内容を持つように設定しています。その後、borderプロパティを使用して形状を作り出しています。矢印の色やサイズは適宜変更可能です。

関連記事：未経験からコーディングがマスター出来ると話題のオンラインスクール

CSSでの三角や矢印のスタイルのカスタマイズ

色やサイズの変更

三角や矢印の色やサイズを変更するには、CSSのプロパティを調整します。

色の変更
三角や矢印の色を変えるには、border-colorやbackground-colorプロパティを使用します。これにより、要素の色を変更することができます。

サイズの変更
三角や矢印のサイズを変更するには、widthやheightプロパティを調整します。これにより、要素の幅や高さを変更することができます。

以下は、色とサイズを変更する例です。

.triangle {
　width: 0;
　height: 0;
　border-left: 50px solid transparent;
　border-right: 50px solid transparent;
　border-bottom: 50px solid #ff0000; /* 赤色に変更 */
}

.arrow {
　position: relative;
}

.arrow::before {
　border-left: 10px solid transparent;
　border-right: 10px solid transparent;
　border-bottom: 10px solid #00ff00; /* 緑色に変更 */
　top: -10px;
}

.arrow::after {
　border-left: 8px solid transparent;
　border-right: 8px solid transparent;
　border-bottom: 8px solid #0000ff; /* 青色に変更 */
　top: -8px;
}

上記のコードでは、三角形と矢印の要素のborder-bottomプロパティの値を変更することで、色を変えることができます。好きな色の値（例えば、赤色は#ff0000、緑色は#00ff00、青色は#0000ffなど）を指定してみましょう。

また、要素の幅や高さを調整することで、三角や矢印のサイズを変更することも可能です。具体的な数値を調整してみてください。

形状の変更

三角や矢印の形状を変更するには、borderやborder-radiusプロパティを使用します。

形状の変更
三角形の形状を変えるには、border-widthやborder-styleプロパティを調整します。これにより、要素のborderの太さやスタイルを変更することができます。

角丸の矢印
矢印の角を丸くするには、border-radiusプロパティを使用します。これにより、要素のborderの角を丸くすることができます。

以下は、形状を変更する例です。

.triangle {
　width: 0;
　height: 0;
　border-left: 50px solid transparent;
　border-right: 100px solid transparent; /* 形状を変更 */
　border-bottom: 50px solid #000;
}

.arrow {
　position: relative;
}

.arrow::before {
　border-left: 10px solid transparent;
　border-right: 20px solid transparent; /* 形状を変更 */
　border-bottom: 10px solid #000;
　top: -10px;
}

.arrow::after {
　border-left: 8px solid transparent;
　border-right: 16px solid transparent; /* 形状を変更 */
　border-bottom: 8px solid #000;
　top: -8px;
}

上記のコードでは、borderプロパティの値を調整することで、三角形や矢印の形状を変えることができます。幅や高さを適宜変更しながら、独自の形状を作り出してみてください。

アニメーションの追加

三角や矢印にアニメーションを追加することで、動きのあるデザインを作成することもできます。

アニメーションの追加
アニメーションを追加するには、@keyframesルールを使用します。これにより、要素のスタイルを時間の経過とともに変化させることができます。

以下は、アニメーションを追加する例です。

.triangle {
　width: 0;
　height: 0;
　border-left: 50px solid transparent;
　border-right: 50px solid transparent;
　border-bottom: 50px solid #000;
　animation: rotate 2s linear infinite; /* アニメーションを追加 */
}

@keyframes rotate {
　0% {
　　transform: rotate(0deg);
　}
　100% {
　　transform: rotate(360deg);
　}
}

.arrow {
　position: relative;
}

.arrow::before {
　border-left: 10px solid transparent;
　border-right: 10px solid transparent;
　border-bottom: 10px solid #000;
　top: -10px;
　animation: slide 1s alternate infinite; /* アニメーションを追加 */
}

@keyframes slide {
　0% {
　　transform: translateX(0);
　}
　100% {
　　transform: translateX(20px);
　}
}

.arrow::after {
　border-left: 8px solid transparent;
　border-right: 8px solid transparent;
　border-bottom: 8px solid #000;
　top: -8px;
　animation: blink 0.5s linear infinite; /* アニメーションを追加 */
}

@keyframes blink {
　0% {
　　opacity: 1;
　}
　50% {
　　opacity: 0;
　}
　100% {
　　opacity: 1;
　}
}

上記のコードでは、アニメーションを追加するために@keyframesルールを使用しています。

要素にanimationプロパティを適用し、アニメーション名と時間、タイミングなどを指定します。rotateやslide、blinkなどのアニメーション名は任意の名前で構いません。

プログラミングスクールなら
忍者CODE

適正コース診断2
質問に答えて簡単１分の適正プラン診断！

CSSでの三角や矢印の配置方法

テキストの中に配置する

三角や矢印をテキストの中に配置するには、要素内に三角や矢印を追加し、テキストの一部として表示します。

以下は、テキストの中に三角や矢印を配置する例です。

.triangle {
　display: inline-block; /* 要素をインラインブロックとして表示 */
　width: 0;
　height: 0;
　border-left: 5px solid transparent;
　border-right: 5px solid transparent;
　border-bottom: 10px solid #000;
　margin-right: 5px; /* テキストとの間隔を設定 */
}

.arrow {
　display: inline-block;
　position: relative;
}

.arrow::before {
　content: "";
　position: absolute;
　top: -5px;
　left: -10px;
　width: 0;
　height: 0;
　border-left: 5px solid transparent;
　border-right: 5px solid transparent;
　border-bottom: 10px solid #000;
}

上記のコードでは、.triangleクラスと.arrowクラスを使用して、テキストの中に三角や矢印を配置しています。テキストの要素に対してdisplay: inline-block;を指定することで、テキストの一部として要素を表示することができます。

要素の背景として配置する

三角や矢印を要素の背景として配置するには、要素に背景色を設定し、その背景内に三角や矢印を表示します。

以下は、要素の背景として三角や矢印を配置する例です。

.container {
　position: relative;
　width: 200px;
　height: 200px;
　background-color: #f0f0f0;
　padding: 20px;
}

.triangle {
　position: absolute;
　top: 50%;
　left: 50%;
　transform: translate(-50%, -50%);
　width: 0;
　height: 0;
　border-left: 50px solid transparent;
　border-right: 50px solid transparent;
　border-bottom: 50px solid #000;
}

.arrow {
　position: absolute;
　top: 20px;
　right: 20px;
　width: 0;
　height: 0;
　border-left: 10px solid transparent;
　border-right: 10px solid transparent;
　border-bottom: 10px solid #000;
}

上記のコードでは、.containerクラス内に三角や矢印を要素の背景として配置しています。

要素自体に対してposition: absolute;を指定し、親要素である.containerに対してposition: relative;を指定することで、要素を相対的に配置することができます。

要素の位置に合わせて配置する

三角や矢印を要素の特定の位置に合わせて配置するには、positionプロパティを使用して要素の位置を調整します。

以下は、要素の位置に合わせて三角や矢印を配置する例です。

.container {
　position: relative;
　width: 200px;
　height: 200px;
　background-color: #f0f0f0;
　padding: 20px;
}

.triangle {
　position: absolute;
　top: 0;
　left: 0;
　width: 0;
　height: 0;
　border-left: 50px solid transparent;
　border-right: 50px solid transparent;
　border-bottom: 50px solid #000;
}

.arrow {
　position: absolute;
　bottom: 0;
　right: 0;
　width: 0;
　height: 0;
　border-left: 10px solid transparent;
　border-right: 10px solid transparent;
　border-bottom: 10px solid #000;
}

上記のコードでは、.containerクラス内に三角や矢印を要素の位置に合わせて配置しています。

要素自体に対してposition: absolute;を指定し、topやleft、bottom、rightの値を調整することで、要素を特定の位置に配置することができます。
プログラミングスクール無料メンター相談

CSSでのドロップダウンメニューの矢印の作成方法

ドロップダウンメニューの基本構造

ドロップダウンメニューは、マウスオーバーやクリックなどのイベントに応じてメニューが表示されるUI要素です。基本的な構造は以下の例をご覧ください。

<div class="dropdown">
　<button class="dropdown-toggle">メニュー</button>
　<ul class="dropdown-menu">
　　<li><a href="#">項目1</a></li>
　　<li><a href="#">項目2</a></li>
　　<li><a href="#">項目3</a></li>
　</ul>
</div>

上記のコードでは、.dropdownクラス内にドロップダウンメニューの基本構造が記述されています。ボタン要素（.dropdown-toggle）をクリックすると、リスト要素（.dropdown-menu）が表示されるという仕組みです。

矢印の追加と表示制御

ドロップダウンメニューに矢印を追加し、メニューの表示状態に応じて矢印の向きを制御します。以下は一般的な方法です。

.dropdown-toggle::after {
　content: "";
　display: inline-block;
　width: 0;
　height: 0;
　border-top: 5px solid #000;
　border-right: 5px solid transparent;
　border-left: 5px solid transparent;
　margin-left: 5px;
　vertical-align: middle;
　transition: transform 0.3s ease-in-out;
}

.dropdown-menu {
　display: none;
　position: absolute;
　top: 100%;
　left: 0;
　background-color: #f0f0f0;
　padding: 10px;
}

.dropdown:hover .dropdown-menu {
　display: block;
}

.dropdown:hover .dropdown-toggle::after {
　transform: rotate(180deg);
}

上記のコードでは、::after疑似要素を使用して矢印を追加し、その表示を制御しています。

.dropdown-toggle::afterで、ボタン要素の後ろに矢印を追加しています。矢印のデザインはborderプロパティを使用して作成されており、transitionプロパティを使用して滑らかなアニメーション効果を与えています。

また、.dropdown-menuクラスでドロップダウンメニューのスタイルを指定しています。初期状態ではdisplay: none;を設定して非表示にし、.dropdown:hover .dropdown-menuのように:hover疑似クラスを使用して、ドロップダウンメニューが表示されるようにしています。

さらに、.dropdown:hover .dropdown-toggle::afterのように:hover疑似クラスを使用して、ドロップダウンメニューが表示されたときに矢印の方向を反転させるアニメーション効果を追加しています。

関連記事：「未経験からコーディングをマスターするなら」

プログラミングスクール無料メンター相談

挫折することなくCSSを習得するなら

独学？スクール？

これからHTMLやCSSなどプログラミング言語の学習を始めようと考えている方、または最近学習を始めた方がいらっしゃるかと思います。

ただ、実際学習を始めるとなると

1人で学習を進められるかな…
どこをゴールにしていいかわからない…
挫折してしまわないかな…

このように不安な気持ちになる方もいますよね。

たしかに、何かわからないことが出てきたとき、エラーが解決できないとき、誰かに相談できる環境がないことが理由でプログラミング言語の学習を挫折する方が多くいます。

実際にプログラミング言語初学者が挫折をする1番の理由は「不明点が発生した際に気軽に相談できる環境がない」という実態があります。

それだけ学習する環境が大事だということです。

そんな背景があるからこそ、プログラミングの勉強をする際にスクールを選ぶ方が多いのが事実です。

プログラミングスクールに通う理由は他にもあり

・確実にスキルを身に着けたい
・効率良く学習を進めたい
・モチベーションの維持にもつながりそう
・以前に独学で挫折した経験がある
このように「確実に！」「効率良く！」といった声もよく上がります。
やはり途中で挫折してしまったり、どこを目指しているのかわからなくなったりした場合、「プログラミングを学習することは難しい」と認識してしまい、その後のスキル習得を諦めてしまう可能性が非常に高くなります。
このようなことから、社会人で時間もそこまでないため短期間でスキルを習得したい人や独学で進めるのが不安な人が効率性や確実性を求め、プロの講師に相談できる環境が用意されているプログラミングスクールを選択するのがわかります。
「転職をしたい」「副業で稼げるようになりたい」という理由でプログラミング言語を学び始めたとき、わからない箇所を飛ばしてそのままに放置して学習を進めたとしても、目標とする転職や副業が実現するほどのスキルが身につかなければ多くの時間を費やして何も得られないという結果になります。
ですので、1人でCSSを始めとしたプログラミングスキルの習得ができるか不安な方は多少の費用をかけてでも、不明点をすぐに相談・解決できる環境や効率良く学習できる有料サービスを選ぶのがベストだと言えます。
そこでおすすめしたいのが「忍者CODE」です。

プログラミングスクール無料メンター相談

忍者CODEをおすすめする1番の理由は「業界最安級の金額でありながら圧倒的学習ボリュームと半永久サポートを提供している」ところにあります。
上記でお伝えしたように、初学者の多くは独力で不明点や問題点を解決できないためにプログラミングの学習を挫折しています。そのため、初学者が経験豊富なプロのエンジニアに相談できない環境下でプログラミングスキルの習得をするのは難易度が高いと言えます。
ですが、忍者CODEでは
・チャットでいつでも、無制限で質問可能
・学習者同士でつながれるコミュニティへの招待
などといったサポート体制を設けているため、学習を進めていく中で出てきた問題点や不明点をスムーズに解決しながら、挫折することなくプログラミングスキルの習得が可能です。
また、忍者CODEでは動画コンテンツにて学習を進めていくため、スッと頭に入ってきやすいようになっているのも特徴です。
未経験でも挫折させないオンラインスクールとして、受講生に寄り添った学習コンテンツを提供している忍者CODEをより詳しく知りたい方はぜひ公式サイトをご覧ください。

まとめ

この記事では、CSSを使って三角や矢印を作成する方法について解説しました。

具体的には、borderを使用した三角の作成方法や::beforeや::afterを使用した矢印の作成方法を紹介しました。

さらに、スタイルのカスタマイズや配置方法についても説明しました。最後に、応用例としてドロップダウンメニューの矢印についても触れました。これらの技術を活用することで、Webデザインにおいて三角や矢印を自由に利用することができます。