この記事は最終更新日から2年以上が経過しており、情報が古くなっている可能性があります。

画像を使用せず、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;
}