Я не могу дать вам символьную сущность, которую вы хотите, но возможно создать ... альтернативу и все равно не использовать изображения (хотя для этого требуется, чтобы сам текст был обернут в элемент, в данном случае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 .
Вышеприведенный span.rotated
раздел, для IEСовместимость <10 (с использованием фильтров, тогда как IE 10 (или, возможно, 9) будет / должен использовать <code>-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, другие версии я не могу проверить).