翻转箭头字符
Flip an arrow character
你好,我找到了这个我喜欢的箭头➣➣
,我试图找到这个箭头的相反方向,但似乎找不到。我注意到,当我在这个页面上找到它时:http://character-code.com/arrows-html-codes.php 列出了一个额外的代码 (➣
),但是当我需要一个左箭头时,这只会产生相同的右箭头。
不存在向左的箭头吗?
<span>➣</span>
span {
transform: rotate(180deg);
display: inline-block;
}
这不提供相反的 unicode 箭头。它将原始箭头旋转 180 度。
更好的是水平翻转箭头。 CSS 应该这样做。
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">➣</span>
</div>
<div>Flipped
<div class="flipped">➣</div>
</div>
没有对应U+27A3 TREEE-D BOTTOM-LIGHTED RIGHTWARDS ARROWHEAD的反方向字符。一个充分的证据是,如果您搜索 Unicode 字符数据库,例如使用 BabelMap,对于名称包含 THREE-D 的字符,您只能找到 U+27A3 和 U+27A2 THREE-D TOP-LIGHTED RIGHTWARDS ARROWHEAD。如果有对应的向左字符,几乎可以肯定它的名字是相似的,只是把RIGHTWARDS换成了LEFTWARDS。
@Mouser 提出了很好的解决方法,但我认为提出的问题也值得回答。
你好,我找到了这个我喜欢的箭头➣➣
,我试图找到这个箭头的相反方向,但似乎找不到。我注意到,当我在这个页面上找到它时:http://character-code.com/arrows-html-codes.php 列出了一个额外的代码 (➣
),但是当我需要一个左箭头时,这只会产生相同的右箭头。
不存在向左的箭头吗?
<span>➣</span>
span {
transform: rotate(180deg);
display: inline-block;
}
这不提供相反的 unicode 箭头。它将原始箭头旋转 180 度。
更好的是水平翻转箭头。 CSS 应该这样做。
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">➣</span>
</div>
<div>Flipped
<div class="flipped">➣</div>
</div>
没有对应U+27A3 TREEE-D BOTTOM-LIGHTED RIGHTWARDS ARROWHEAD的反方向字符。一个充分的证据是,如果您搜索 Unicode 字符数据库,例如使用 BabelMap,对于名称包含 THREE-D 的字符,您只能找到 U+27A3 和 U+27A2 THREE-D TOP-LIGHTED RIGHTWARDS ARROWHEAD。如果有对应的向左字符,几乎可以肯定它的名字是相似的,只是把RIGHTWARDS换成了LEFTWARDS。
@Mouser 提出了很好的解决方法,但我认为提出的问题也值得回答。