web-dev-qa-db-ja.com

UnicodeまたはHTMLには垂直のダブルギユメ（シェブロン）がありますか？

»（"）で表される二重ギユメに似た二重シェブロン記号がUnicode/HTMLスペースにあるかどうか誰かが知っていますか？

言い換えれば、私はテキストでうまくいくことができれば画像の使用を避けようとしていますが、私は次のようなものが必要です：

Example of vertical single and double chevrons

それは私が理解できないように見える二重の山形です。私にとってはグラフィックのように見えます。

htmlunicodehtml-entities
19
jcolebrand

必要な文字エンティティを提供することはできませんが、代替を実行することは可能ですが、それでも画像を使用することはできません（ただし、テキスト自体を要素でラップする必要があります。この場合はspan）：

<span class="shadowed">^</span>
<span class="rotated">&raquo;</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）は-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、他のバージョンではテストできません）で動作します）。

12
David Thomas

このサイトがあなたを助けるかもしれません http://shapecatcher.com/ 、とても便利です！

30
fliptheweb

︽垂直左ダブルアングルブラケット用のU + FE3Dプレゼンテーションフォーム

︾垂直右ダブルアングルブラケット用のU + FE3Eプレゼンテーションフォーム

ただし、これらには中国語または日本語のフォントが必要です。

14
Ignacio Vazquez-Abrams

回転に問題があります。回転（90度）と回転（-90度）を2つの別々の"に適用すると、それらの位置が変化することがわかります。それを修正するためのハッキーな方法は、方向を適用することです：次のようなrtl：

http://codepen.io/tomasz86/pen/lmCaL

1
tomasz86