什么是在Css中通过跨浏览器兼容性实现此目的的最快方法？

Question

如何让css显示有角度的文本？

我有

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

Answer 1

如果您只需要旋转分隔符，这是一个示例：http://jsbin.com/yupozo/1/edit 它基本上将分隔符绘制为常规线，然后使用transform: rotate(-45deg);旋转它。

使用Modernizr并且可能是/字符或图片来处理不支持的浏览器。动态旋转文本更难，但请确保您是否需要支持IE8或更低版本（请参阅Can I Use CSS Transforms?）。

Answer 2

试试这个 -

HTML CODE

<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;}