会員の方はこちらトップCSSデザインテクニックCSSアイコン三角形の矢印アイコンをつくろうCSSデザインテクニック三角形の矢印アイコンをつくろうCSSを使って三角形の矢印アイコンをつくってみましょう。ブックマークHTML・CSSUIデザインアイコンWebデザイン公開日:2019/10/24最終更新日:2019/10/24目次1.全体の作り方の流れ2.borderを指定する3.幅・高さを0にする4.一片以外のborderの色を透明にする1.全体の作り方の流れcssで三角形の矢印を作る場合、三角を直接作るのではなく、borderをうまく使って三角形を作っていきます。図にあるように、以下のような手順を行うことで簡単に作成することができます。borderを指定する幅・高さを0にする一片以外のborderの色を透明にする2.borderを指定するまず最初に三角形の元となるborderを指定していきます。今回はわかりやすいように各辺の色を変えていますが、通常は1色で大丈夫です。色を変えているので分かると思いますが、各辺の境目は斜めにできていています。三角形アイコンはこれを利用して作成していきます。CodePen.3.幅・高さを0にする次に、真ん中の部分は不要なので幅・高さを0にしてborderだけの要素にしていきます。幅と高さを指定しないと要素に応じて自動で幅が決まってしまうため、ここは明示的に幅と高さを指定する必要があります。CodePen.4.一片以外のborderの色を透明にする最後に残したい一片以外のborderの色を透明にすることで三角形が完成します。この状態でも大丈夫なのですが、透明部分のスペースも要素として表示されているので、表示よりも大きいサイズとしてレンダリングされます。要素のサイズを厳密にしたい場合は色をつけている辺と反対側のborderの太さを0にするとより厳密なアイコンとして作成できます。