画像を使わずCSSで三角マーク

ボーダーの4辺をCSSで指定し3辺を transparent で消す。
:beforeでテキストの左 , :after で右に表示できる。(IE6, IE7は不可)

#test:before {
border-bottom: solid 12px blue;
border-left: solid 12px transparent;
border-right: solid 12px transparent;
border-top: solid 12px transparent;
content: ”;
display: inline-block;
height: 0;
vertical-align: middle;
width: 0;
}

三角マーク表示テスト

コーディングに関する記事

コメント