I can't give you the character entity that you want, but it's possible to effect an...alternative, and still not use images (though it does require that the text itself be wrapped in an element, in this case span
):
<span class="shadowed">^</span>
<span class="rotated">»</span>
CSS:
span { /* this is all, pretty much, just for the aesthetics, and to be adapted */
margin: 0 auto 1em auto;
font-family: Helvetica, Calibri, Arial, sans-serif;
font-size: 2em;
font-weight: bold;
color: #000;
background-color: #ffa;
display: block;
width: 2em;
height: 2em;
line-height: 2em;
border-radius: 0.5em;
text-align: center;
}
span.shadowed {
text-shadow: 0 0.5em 0 #000;
}
span.rotated {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
JS Fiddle demo.
The above span.rotated
section, for IE < 10 compatibility (using filters, whereas IE 10 (or possibly 9) would/should use the -ms-transform
or, simply, transform
CSS3), using a filter
approach:
span.rotated {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
/* IE < 10 follows */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
JS Fiddle demo (works in IE 7/XP, other versions I'm unable to test).