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でスマートフォンなどデバイスのモックアップを実装できる「Devices.css」
  • キレイなアニメーションのCSSスピナーコレクション「Epic Spinners」
  • 【CSS】フォントサイズの単位を相対比較できる「PXtoEM.com」
  • カエルのゲームでFlexboxを学べるサイト「Flexbox Froggy」
  • 30秒以内に理解できるCSSスニペットのコレクション「30 Seconds of CSS」
RELATED POSTS
  • 【jQuery】要素をふわふわ動かすプラグイン「jqFloat.js」
  • 様々なスタイルのCSSを簡単に作れる「Generate CSS」
  • 動きのあるバブルを背景に設定することができる「bubbly-bg」
  • SVGで作成されたローディングアイコンセット「SVG Loaders」
  • 料金表のページをまとめたギャラリーサイト「Pricing Pages」
  • Webサイトのページ表示速度を測定できる無料サービスまとめ
RECENT POSTS
  • 【2021年版】 WordPressのおすすめテーマ17選(無料版/有料版)
  • 【2021年版】 無料で使えるフリー画像・写真素材サイト27選(国内/海外)
  • 【2021年版】 Google Fontsの使い方とおすすめ日本語フォント
  • 【2021年版】 無料で使えるフリー動画素材サイト10選
POPULAR POSTS
  • 【2021年版】 無料で使えるフリーイラスト素材サイト33選(商用利用可)
  • 【無料】漢字が使える日本語フリーフォント70選
  • 【2021年版】 Google Fontsの使い方とおすすめ日本語フォント
  • フォントを調べる時に役に立つツール・サイト10選
  • Youtubeの埋め込み動画をレスポンシブに対応させる方法