画像を使わず、矢印として三角形を使う場合のtips

  1. 三角形のフォントを使う ▲▼▶◀

    (使用例) ▲ページのトップに戻る
  2. 横、縦のサイズを0にしたボックスのボーダーを使う

    横、縦のサイズを0にしたボックスのボーダーを「border: 10px solid #cccccc;」位に指定。
    #cccccc;は分かりやすくするためつけています。
    三角形を表示したいボーダー部分(top、bottom、left、right)の色を#333333に指定(例1)。
    表示したい三角形以外のボーダー部分をbackgroundと同じ色にすることで三角形のみを表示します(例2)。
    使用例は、サイズ、マージンを調整しています。
    (例1) 

    (例2) 

    (使用例1) 

    (使用例2) 

このページの内容は、「CSSの小技・まとめ」にも掲載しています。
戻るボタン