在跨瀏覽器兼容性的Css中完成此操作的最快方法是什麼？

你如何讓css顯示有角度的文本？在跨瀏覽器兼容性的Css中完成此操作的最快方法是什麼？

enter image description here

我有

<span class="wrapper"> 
<span class="alpha">Alpha</span> 
<span class="seperator"></span> 
<span class="number">1 Number</span> 
</span>

來源

2014-02-18 Genus

你是問有關旋轉文本或子索引和superindex？ –

只是分隔符跨度它有一個邊框和高度設置爲1px位置是絕對的。 – Genus

你的意思是[像這樣]（http://jsfiddle.net/gKyVA/1）？這將工作在IE9 + – Vucko

如果您只需要旋轉分離器，這裏有一個例子：http://jsbin.com/yupozo/1/edit 它基本上是平的分離器作爲常規線路，然後用transform: rotate(-45deg);轉動它。

請務必使用Modernizr處理不支持的瀏覽器，並且可能使用/字符或圖像。動態旋轉文本比較難，但請確保您需要支持IE8或更低版本（請參閱Can I Use CSS Transforms?）。

來源

2014-02-18 13:19:58 Ronny

謝謝@Ronny這就是我想要的，但是你給了我一個想法，讓我把頭撞到牆上幾次，我可以簡單地在背景中使用圖像。 – Genus

試試這個 -

HTML代碼

<div class="wrapper"> 
<div class="alpha">Alpha</div> 
<div class="seperator"></div> 
<div class="number">1 Number</div> 
</div>

CSS

.wrapper{display:block; width:200px; height:200px; border:1px solid #000; position:relative;} 
.wrapper .alpha{position:absolute; top:10%; left:10%; float:left;} 
.wrapper .seperator{float:left; position:absolute; top:50%; width:100%; 
height:auto; border: 1px solid #000; transform: rotate(135deg); 
-ms-transform: rotate(135deg); -webkit-transform: rotate(135deg);} 
.wrapper .number{position:absolute; bottom:10%; right:10%; float:right;}

來源

2014-02-18 13:38:30

在跨瀏覽器兼容性的Css中完成此操作的最快方法是什麼？

回答

相關問題