画像を使用せず、CSSで円とか三角とかのボックスを作ってみる方法をメモ。
疑似要素で表示させればリストのマーカーみたいな使い方が出来ます。
まずは円。正円にするときは縦横の長さの半分の値を角丸に指定します。
要素 { width: 100px; height: 100px; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; }
次が三角。縦横の長さは0を指定し、頂点の反対側の辺を基準にして色々やっていきます。
要素 { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #000; }