CODEWITHSUNDEEP
htmlcssascii
Austin
Austin

Reputation: 3080

Flip an arrow character

Hello I found this arrow that I like ➣ ➣, I am trying to get the opposite direction for this arrow but cannot seem to find one. I noticed that when I found it on this page: http://character-code.com/arrows-html-codes.php there was an additional code listed (➣), but this just makes the same right-arrow when I need a left one.

Does a left arrow for this not exist?

Upvotes: 8

Views: 14497

Answers (2)

Mouser
Mouser

Reputation: 13304

<span>&#10147;</span>

span {
  transform: rotate(180deg);
  display: inline-block;
}

This doesn't provide an opposite unicode arrow. It rotates the original arrow 180 degrees.

Even better is to flip the arrow horizontally. This CSS should do that.

transform: scale(-1);
filter: flipH;
-ms-filter: flipH;


span.rotate {
  transform: rotate(180deg);
  display: inline-block;
}

div.flipped {
  display: inline-block;
  -moz-transform: scale(-1, 1);
  -webkit-transform: scale(-1, 1);
  -o-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
<div>Rotated
  <span class="rotate">&#10147;</span>
</div>

<div>Flipped
  <div class="flipped">&#10147;</div>
</div>

Upvotes: 19

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201818

There is no opposite-direction character corresponding to U+27A3 THREE-D BOTTOM-LIGHTED RIGHTWARDS ARROWHEAD. A sufficient proof is that if you search a Unicode character data base, e.g. using BabelMap, for characters with names containing THREE-D, you find only U+27A3 and U+27A2 THREE-D TOP-LIGHTED RIGHTWARDS ARROWHEAD. If there were a corresponding leftwards character, it would be practically certain that its name is similar, just with RIGHTWARDS replaced by LEFTWARDS.

@Mouser has suggested nice workarounds, but I thought the question as asked deserves to be answered, too.

Upvotes: 2

Related Questions