CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        padding: 20px;
    }
    i {
        border: solid rgb(62, 19, 182);
        border-width: 0 6px 6px 0;
        display: inline-block;
        padding: 3px;
    }
    p {
        font-size: 18px;
        font-weight: 500;
    }
    .rightArrow {
        transform: rotate(-45deg);
    }
    .leftArrow {
        transform: rotate(135deg);
    }
    .upArrow {
        transform: rotate(-135deg);
    }
    .downArrow {
        transform: rotate(45deg);
    }
</style>
</head>
<body>
<h2>CSSで作る矢印</h2>
<p>右向きの矢印： <i class="rightArrow"></i></p>
<p>左向きの矢印： <i class="leftArrow"></i></p>
<p>上向きの矢印： <i class="upArrow"></i></p>
<p>下向きの矢印： <i class="downArrow"></i></p>
</body>
</html>

実行結果

上記のコードを実行すると、ブラウザには次のように表示されます。

CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

コードのポイント解説

  • i 要素の基本スタイル： border-width: 0 6px 6px 0; と指定することで、右と下の2辺だけに太い境界線が引かれ、L字型の形状になります。display: inline-block; により、文章中に配置しながら変形・回転が可能になっています。
  • .rightArrow（右向き）： rotate(-45deg) で反時計回りに45度回転させます。
  • .leftArrow（左向き）： rotate(135deg) で時計回りに135度回転させます。
  • .upArrow（上向き）： rotate(-135deg) で反時計回りに135度回転させます。
  • .downArrow（下向き）： rotate(45deg) で時計回りに45度回転させます。

この手法は追加ファイルが不要で動作も軽く、主要ブラウザでの互換性にも優れています。パンくずリストの区切り、スライダーやカルーセルのナビゲーションボタン、アコーディオンメニューの開閉アイコンなど、さまざまなUIパーツに応用できるので、ぜひ活用してみてください。

  1. CSSでカード型UIを作成する方法｜影とホバー効果を活用した実装例

    Webサイトやアプリのデザインにおいて、カード型のUIはプロフィール紹介や商品一覧など、さまざまな場面で活用される定番のレイアウトです。CSSを使えば、画像とテキストを組み合わせた洗練されたカードを簡単に作成できます。 この記事では、box-shadow（影）や :hover（ホバー時の変化）を組み合わせて、立体感のあるカードを実装する方法を解説します。 カード作成のサンプルコード 以下のコードは、画像と肩書き情報を持つシンプルなカードの例です。 <!DOCTYPE html> <html> <head> <meta name=viewport con

  2. CSSを使ってクーポンを作成する方法【サンプルコード付き】

    CSSを活用すれば、破線の枠やプロモーションコード、有効期限などを含んだ見栄えの良いクーポンデザインを、HTMLとCSSだけで簡単に作成できます。本記事では、実際に動作するサンプルコードを交えて、クーポンの実装方法をわかりやすく解説します。 クーポン作成のサンプルコード 以下のコードは、店舗名・商品画像・キャッチコピー・割引コード・有効期限を含むクーポンを作成するものです。破線のボーダー（dashed）を使うことで、切り取り線のある本物のクーポンらしい雰囲気を演出しています。 <!DOCTYPE html> <html> <head> <meta na