For a design I'm making I need to use a character similar to the "greater than" sign (>), only less wide. Like this:


However, I'm having difficulties finding such a symbol. Would I have to use a .png image for this or can I use a real text character?



i {
border: solid black;
border-width: 0 1px 1px 0;
display: inline-block;
padding: 3px;

.right {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);

.left {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);

.up {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);

.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);


<p>Right arrow: <i class="right"></i></p>
<p>Left arrow: <i class="left"></i></p>
<p>Up arrow: <i class="up"></i></p>
<p>Down arrow: <i class="down"></i></p>


enter image description here

  • Nice implementation, but it isn't ASCII. – Steve Feb 14 at 22:20

Depends on where you will use it.

"›" - using keyboard: Alt+0155 or HTML: &rsaquo; More alternatives at https://codepoints.net/U+203A

  • its soooo tiny! – MarksCode Feb 14 at 19:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.