2011-11-14 1 views
16

»(»)で表されるダブルギルメットに似たユニコード/ HTMLスペースにダブルシェブロン記号があるかどうかは誰にも分かりますか?言い換えればユニコードまたはHTMLに垂直のダブルギリギリ(シェブロン)がありますか?

、私はテキストとによって得ることができれば、画像を使用しないようにしようとしているが、私はこのような何か必要があります。それは、ダブルシェブロンだ

Example of vertical single and double chevrons

を私が見えることはできません把握するため。それは私のためのグラフィックのように見えます。

+3

画像を回避するには、偉大な目標ですが、多くの人々は、右とにかくユニコードをしないブラウザで閲覧してしまいます。彼らは箱を見るでしょう。私は個人的にイメージをお勧めします。 FWIWこのようなものは見当たらなかったhttp://en.wikipedia.org/wiki/List_of_Unicode_characters –

+1

シェブロンについてはわかりませんが、曲折記号「^」/アクセント記号付きアクセント記号「ˆ」 – Smamatti

答えて

11

私はあなたに必要な文字エンティティを与えることはできませんが、代わりに効果を出すことはできますが、まだ画像は使用しません(ただし、テキスト自体を要素内にラップする必要があります。ケース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

IE < 10互換filterアプローチを用いて、(IE 10(または多分9)/ -ms-transform又は、単に、transform CSS3を使用すべきであろう一方、フィルタを使用して)に対する上記span.rotatedセクション:

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で動作します。他のバージョンではテストできません)。

+0

があります。独創的!それはIEで動作しないベットですか? : - \(編集:IE8以下) – jcolebrand

+1

いいえ、私は '-ms-rotate'に隣接するsnarkyのコメントを '楽観主義から...'の行に沿って何かを言っておくつもりでしたが、私はそれがちょうどノイズのコードを作ったと感じた... –

+2

どのように回転については、この記事をチェックしてください(要素ローテーションの章)http://coding.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/ – fliptheweb

29

http://shapecatcher.com/このサイトはあなたに役立つかもしれません、非常に便利です!

+3

ありがとう、それはクールなサイトです。受け入れのチェックマークはあなたに勝つことはありませんが、それはあなたに私から+1を得るでしょう。上のダブルシェブロンのためのいくつかの興味深い代用品を見つけましたが、下のダブルシェブロンのためのものは何も見つかりませんでした。 – jcolebrand

+3

それはすばらしいサイトです – slashnick

+3

私は以前これについて知りたがりました。 – jagill

13

︽U + FE3DプレゼンテーションFORMがVERTICAL LEFT DOUBLE ANGLEのブラケットについて

︾U + FE3EプレゼンテーションFORM VERTICAL RIGHT DOUBLE ANGLEのブラケットについて

これらはしかし、中国語や日本語フォントが必要です。

1

ローテーションに問題があります。回転(90度)と回転(-90度)を別々の2つの»に適用すると、位置が変わることがわかります。それを修正するためのハック方法は、方向を適用することである。このようなRTL:

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

+0

は直接関連していませんが、よく知っておいてください – jcolebrand

関連する問題