CSSだけで、三角アイコンと矢印アイコンをつくる

シンプルに疑似要素の「:before」「:after」でつくる。
色も大きさも自由に変更できるので便利。
border-radiusで角丸にするのも簡単。

三角アイコン

See the Pen
CSSだけで、三角アイコンをつくる by 125naroom (@125naroom)
on CodePen.

三角アイコン（丸背景あり）

See the Pen
CSSだけで、三角アイコン（丸背景あり）をつくる by 125naroom (@125naroom)
on CodePen.

矢印アイコン（右向き）

See the Pen
CSSだけで、矢印アイコン（右向き）をつくる by 125naroom (@125naroom)
on CodePen.

矢印アイコン（下向き）

See the Pen
CSSだけで、矢印アイコン（下向き）をつくる by 125naroom (@125naroom)
on CodePen.

矢印アイコン（上向き）

See the Pen
CSSだけで、矢印アイコン（上向き）をつくる by 125naroom (@125naroom)
on CodePen.

矢印アイコン（丸背景あり）

See the Pen
CSSだけで、矢印アイコン（丸背景あり）をつくる by 125naroom (@125naroom)
on CodePen.

三角をつくるのに便利なサイトさん

▽CSS三角形作成ツール
http://apps.eky.hk/css-triangle-generator/ja