CODEWITHSUNDEEP
htmlcss
Genus
Genus

Reputation: 284

Whats the quickest way to accomplish this in Css with cross browser compatibility?

how do you get css to display angled texts?

enter image description here

i have

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

Upvotes: 1

Views: 68

Answers (2)

Rohit Suthar
Rohit Suthar

Reputation: 3628

Try this -

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

Upvotes: 0

Ronny
Ronny

Reputation: 4517

If you need only the separator rotated, here's an example: http://jsbin.com/yupozo/1/edit it basically draws the separator as a regular line, then rotates it with transform: rotate(-45deg);.

Do take care of non-supporting browsers with Modernizr and probably a / character or image. Dynamic rotating text is harder, but make sure if you need to support IE8 or below (See Can I Use CSS Transforms?).

Upvotes: 3

Related Questions