定期的に発症する画像使いたくなくなる病のため、ページめくりの矢印を画像じゃなくしたいなといろいろ考えているんですけど、なかなか良い物ができません。ユニコードのArrowやDingbatsなどにはいわゆる矢印的なもの(→みたいなもの)はいくつもあるので、そういうのが良いのならそれで良いと思うんですけど、自分のイメージではあんまり矢印々々してないのが良いかなというのがあるので、それらはちょっと使いづらかったです。作った中ではborderとtransformプロパティを使ったものがそこそこまともに見えるような気がしました。各ブラウザでborderプロパティの描画が違うことに加えてtransformプロパティによる変化も微妙に違うため、並べて見ると結構違う感じになってしまいました。Operaで全体的に薄くなるのはどういうことですか......。CSSは単純で::before擬似要素で上と右に枠線を持つ矩形を作ってやり、それを45度回転させるというものです。rotate(45deg);}位置合わせはmarginプロパティで行いますが、枠線の幅分中心がずれるので多少X方向の位置を調整する必要があります。二番目のデモはborderプロパティのスタイルをdoubleにしたものです。変わった感じ......というか不恰好ですね。三番目は::after擬似要素も使って2つの矢印を重ねてみました。四番目と五番目はborderプロパティの代わりにbox-shadowプロパティを使っています。white;}と途中で背景色と同じ色で影をカットアウトするだけでいけますね。3つでも4つでもいくらでも増やせます。7.0.1で微妙にゴミが出てしまいます......。(›)で良い気もしますが、これはこれでフォントによって形や位置が微妙に違うという事情があり、縦方向の位置合わせがちょっと面倒くさい感じです。Webフォントを使うならばそこらへんの事情は解決できることが多いので、こういった細かい装飾はWebフォントに取って代わられていくのかもしれませんね。CC/BYTwitterRSSながしまきょう。