4辺が違う色のボーダーにborder-radius:50%を加えると…

タイトルのままですが、4辺が違う色のボーダーにborder-radius:50%を加えてサークル状にするとどうなるか知っていますか？私は先日知ったので紹介します。 border-radius:50%を加えてサークル状にするとこんな感じになります。border-radiusはIE8以下非対応ですので、下のは画像にしています。 かなり印象は変わります。当たり前といえば当たり前な気もしますが。で、transitionで回すと面白いです。 ということでサンプルを作ってみました。最近なぜかIEが起動しないのでIEの動作確認はしていません。。 せっかくなのでコードも載せておきます。 <a href="#" id="circle1">CSS<span></span></a> ボーダーだけを回すためspan要素を入れてボーダーを指定しています。ちょっとかっこ悪い気もしますが、他に方法が思いつかなかったので

[june29]

お手軽にかわいい

[matsuko13]

おもしろい

[simpleboxes]

"ボーダーだけを回すためspan要素を入れて…(中略)…ちょっとかっこ悪い気もしますが" かっこ悪いとかじゃなくてマークアップとしてダメなんじゃ？:afterを使ったりするんじゃダメなのかな。

[mnnn]

＞IEが起動しない＜