Ответ 1
Я не могу дать вам характерный объект, который вы хотите, но он может создать... альтернативу и по-прежнему не использовать изображения (хотя для этого требуется, чтобы сам текст был обернут в элемент, в этом случае 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);
}
Вышеупомянутый раздел span.rotated для IE < 10 (с использованием фильтров, тогда как IE 10 (или, возможно, 9) будет/должен использовать -ms-transform или, просто, transform CSS3), используя подход filter:
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 (работает в IE 7/XP, другие версии я не могу проверить).