CODEWITHSUNDEEP
css
elixir
elixir

Reputation: 21

Positing rotated text along div

First of all, an image of what I am trying to acheive:

Sample here:

sample https://i.sstatic.net/1jXMA.png

The white box with the word 'div' in it is obviously the div I have. For my purposes, it's a div centered in a page using width:500px; margin: 0 auto;. What I want is to be able to align some rotated text (using -moz-transform: rotate(90deg) or alternatively prefixed rotates) along the top of the div, like the word 'Holy' above (sample text). I would also like to set the baseline on that div, though it isn't that important.

By the way, I used some absolute positioning in Firebug to get the text aligned there - it was hacked there using per pixel positioning. It's not very flexible (if at all) because once I increase the font size or change the position of the div, it's broken.

Also: I am open to using SASS and other such things (I don't have any experience with it yet, but I do I think it allows use of variables which may help).

Upvotes: 2

Views: 1640

Answers (2)

Mohsen
Mohsen

Reputation: 65785

When you can use CSS transform it means you can use pseudo elements in your CSS code. Then I will add that "Holly" part via :after pseudo element.

 div:after{
    content:"Holy";
    line-height:20px;
    position:absolute;
    background:yellow;
    padding:0 10px;
    left:100%; top:0;
    -webkit-transform:rotate(90deg) translateY(-100%);
    -webkit-transform-origin:0 0;
 }

As you can see I've use translateY to move this part out of the div, because we rotated the thing before then translateY will work as translateX. transform-origin is set to 0 0.

This code is independent from you div size.

Look at it live here:

http://jsbin.com/akaziy/2/

Upvotes: 2

Yokocapolo
Yokocapolo

Reputation: 168

You can place something like this in your .css file (the margin-top & margin-bottom are just examples)

div {
    width:500px;
    margin: 0px auto;
}

.holly {
    margin-top:20px;
    margin-left:520px
    /* Safari */
    -webkit-transform: rotate(90deg);

    /* Firefox */
    -moz-transform: rotate(90deg);

    /* IE */
    -ms-transform: rotate(90deg);

    /* Opera */
    -o-transform: rotate(90deg);

    /* Internet Explorer 9*/
    -ms-transform: rotate(90deg);

    /*undefined prefix*/
    transform: rotate(90deg);
}

Upvotes: 1

Related Questions