CSSだけで三角・矢印を作る方法

 
CSSだけで三角・矢印を作る方法

Web制作で三角・矢印を使用したい場合、CSSのborderプロパティで三角・矢印を作成することができます。カラーやサイズをCSSで簡単に変更することができるので、ちょっとしたポイントや、アクセントで使用したい時に便利です。今回は基本的な三角・矢印の作り方と、実際に使えそうな三角・矢印のデザイン例を紹介します。
コピペで使用する場合はフォントサイズによってアイコンの位置等がズレてしまいますのでCSSを調整して下さい。





CSSで作る三角・矢印




1

CSSで作る三角(右向き)

borderプロパティを使用し作成します。右向きの場合はborder-left左向きの場合はborder-rightと作成したい向きの反対側のborderのカラーを設定し、他はtransparentでボーダーの色を透明にします。

html
    <div class="triangle01"></div>
    
    
CSS
    .triangle01{ 
        width: 0;
        height: 0;
        border-top: solid 15px transparent;
        border-right: solid 15px transparent;
        border-bottom: solid 15px transparent;
        border-left: solid 15px #697b91;
    }
    
2

CSSで作る矢印(其の1)

borderプロパティを使用し作成します。border2辺の線幅とカラーを指定し、transform: rotate(45deg);で角度と変えて形成します。

html
    <div class="arrow01"></div>
    
    
CSS
    .arrow01 {
        display: block;
        width: 15px;
        height: 15px;
        border-top: solid 3px #697b91;
        border-right: solid 3px #697b91;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    
3

CSSで作る矢印(其の2)

::before擬似要素を使い、三角を長方形を組み合わせ形成します。

html
    <div class="arrow02"></div>
    
    
CSS
    .arrow02 {
        position:relative;
        height:16px;
        width:16px;
        background-color:#697b91;
    }
    
    .arrow02::before {
        position:absolute;
        content:"";
        border:solid 16px transparent;
        border-left:solid 16px #697b91;
        top:-8px;
        left:12px;
    }
    


アイコンとして使う三角・矢印




1

三角アイコン


文頭の矢印アイコンを付けるCSS
html
    <div class="arrow03">文頭の矢印アイコンを付けるCSS</div>
    
    
CSS
    .arrow03 {
        position: relative;
        padding-left: 13px;
    }
    .arrow03::before {
        position: absolute;
        content: '';
        width: 0;
        height: 0;
        border: solid 6px transparent;
        border-left: solid 8px #697b91;
        top: 50%;
        left: 0;
        margin-top: -5px;
    }
    
2

背景付き三角アイコン


文頭の矢印アイコンを付けるCSS
html
    <div class="arrow04">文頭の矢印アイコンを付けるCSS</div>
    
    
CSS
    .arrow04 {
        position: relative;
        padding-left: 22px;
    }
    .arrow04::before {
        position: absolute;
        content: '';
        width: 16px;
        height: 16px;
        background: #697b91;
        border-radius: 50%;
        top: 50%;
        left: 0;
        margin-top: -7px;
    }
    .arrow04::after {
        position: absolute;
        content: '';
        width: 0;
        height: 0;
        border: solid 4px transparent;
        border-left: solid 6px #fff;
        top: 50%;
        left:6px;
        margin-top: -3px;
    }
    
3

矢印(山括弧)アイコン


文頭の矢印アイコンを付けるCSS
html
    <div class="arrow05">文頭の矢印アイコンを付けるCSS</div>
    
    
CSS
    .arrow05 {
        position: relative;
        padding-left: 15px;
    }
    .arrow05::before {
        position: absolute;
        content: '';
        width: 6px;
        height: 6px;
        border-top: solid 2px #697b91;
        border-right: solid 2px #697b91;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        top: 50%;
        left: 0;
        margin-top: -3px;
    }
    
4

背景付き矢印(山括弧)アイコン


文頭の矢印アイコンを付けるCSS
html
    <div class="arrow06">文頭の矢印アイコンを付けるCSS</div>
    
    
CSS
    .arrow06 {
        position: relative;
        padding-left: 22px;
    }
    .arrow06::before {
        position: absolute;
        content: '';
        width: 17px;
        height: 17px;
        background: #697b91;
        border-radius: 50%;
        top: 50%;
        left: 0;
        margin-top: -7px;
    }
    .arrow06::after {
        position: absolute;
        content: '';
        width: 4px;
        height: 4px;
        border-top: solid 1px #fff;
        border-right: solid 1px #fff;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        top: 50%;
        left: 5px;
        margin-top: -1px;
    }
    
5

矢印アイコン


文頭の矢印アイコンを付けるCSS
html
    <div class="arrow07">文頭の矢印アイコンを付けるCSS</div>
    
    
CSS
    .arrow07 {
        position: relative;
        padding-left: 18px;
    }
    .arrow07::before {
        position: absolute;
        content: '';
        width:6px;
        height:6px;
        background-color:#697b91;
        top: 50%;
        left: 0;
        margin-top: -2px;
    }
    .arrow07::after {
        position:absolute;
        content:"";
        border:solid 7px transparent;
        border-left:solid 7px #697b91;
        top: 50%;
        left: 5px;
        margin-top: -6px;
    }
    

CSSのみで三角・矢印を作る方法の紹介でした。使用頻度の多い右向きの三角・矢印の作り方でしたが、上向き・下向き・左向きもCSSを調整すれば簡単に作ることができるので参考にしてみてください。

CSSで簡単に作れるおしゃれな見出しデザイン

design.webclips.jp/css-midashi-ribon/



  • CSSで指定できるカーソルをパッと確認できる「CSS Cursor」
  • ブロックのアニメーションエフェクトが美しい「Block Reveal Effects」
  • CSSでクールなグリッチエフェクトを実装できる「CSS Glitch Effect」
  • 入力フォームを実装するためのテンプレート「Boilerform」
  • CSSでスマートフォンなどデバイスのモックアップを実装できる「Devices.css」
RELATED POSTS
  • キレイなアニメーションのCSSスピナーコレクション「Epic Spinners」
  • 30秒以内に理解できるCSSスニペットのコレクション「30 Seconds of CSS」
  • 背景や区切り線などを簡単に装飾できるCSSライブラリ「pattern.css」
  • スクロール連動のエフェクトを実装できるライブラリ「AOS」
  • CSSで簡単に作れるおしゃれな見出しデザイン20選
  • 【jQuery】ロールオーバー時にテキストをシャッフルさせる「chaffle.js」
RECENT POSTS
  • 配色を決める時に役立つカラーパレット22選
  • 無料で使えるハロウィンデザイン・イラスト素材サイト
  • ロゴデザインの参考になるロゴギャラリーサイト16選
  • バナー広告デザインの参考にしたいギャラリーサイト8選
PICKUP
  • 無料で使えるおしゃれな英語の筆記体フリーフォント20選
  • CSSで作成する吹き出しとデザインのアイデア
  • 導入しておきたいWordPressのおすすめプラグイン
  • 【無料】おすすめのフリー画像・写真素材サイト10選【商用利用可】