CSSだけで矢印を作ってみた｜デロイト トーマツ ウェブサービス株式会社（DWS）公式ブログワーキングマザーの池島です。 年度末に差し掛かり、保護者会や学校説明会、卒園対策委員などで忙しくしております。 現在、自社のコーポレートサイトの制作をしており、初めてやってみることがあったり、試してみたかったことをやってみたりと、スキルアップにも良い機会となっています。 そんな中、画像を使わずにCSSを使って矢印を作る機会がありましたので、備忘録も兼ねて、いくつかご紹介したいと思います。 サポートブラウザは、基本的に最新のバージョンを想定しています。 ::before や ::after を使わず、別のオブジェクトとして扱えば、もっと古いバージョンでも使えると思います。 今回は、HTMLがシンプルにできる方法で考えました。 左から右のグラデーション矢印 まずは、スタンダードな矢印です。グラデーションを付けてみました。 ［IE8〜（グラデーションはIE10〜）］ HTML <div clas
