CSS

CSSのみで三角形!リストに使える矢印アイコン


CSSのみでアイコンを描画する手法はもうだいぶ枯れてきましたね(もちろん、良い意味で)
仕事でスマートフォン対応するようになってから3年経ちましたがもっともよく使ってるのがこれ。

See the Pen CSSのみで矢印アイコン by natsumi (@mayo31) on CodePen.18228

ひとつめ:
個人的な書き方の癖ですが、まず全方向をtransparentで指定してから、矢印の向きだけを上書きしています。

ふたつめ:
一番簡単な、ボックスの2方向にborderを設定してrotate(45deg)。

みっつめ:
ふたつめの方法だと角が気持ち悪いんだよ!っという場合に長方形を2つ組み合わせる方法。

みっつめについては、:beforeと:afterで個別に長方形を作って組み合わせるのが一番きれいだとは思いますが、セマンティックにマークアップしていると極力要素を少なくしたいですよね。:afterはほかのことに使いたい場合もあるよ!ということでbox-shadowをinsetで設定する方法にしてみました。
この方法だとブラウザによっては残り2方向にうっすら線が見える気がするのが気持ち悪いです。
やっぱり気持ち悪いんかい。

スポンサードリンク

菜摘

Web制作がメインですがときどきフライヤーデザインやCDラベルなどDTP系もやってます。 デザイナーだったはずがhtml/cssコーディングに目覚めた。 黒い画面は相変わらず怖い。 javascriptはこのごろちょっと頑張ってるよ。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です