I have the following element

<a href="#" class="some_class">Test Text Here</a>

and this element has light blue background and some padding. Today I came across one small challenge: I know we can rotate element, however its contents are also rotated. What I was trying to achieve looks like this:

enter image description here

So the element itself is slightly rotated, however its contents stay in place. Is this achievable just with CSS3? I tried playing around with several nested elements, however by rotating their parent element all child elements rotated as well. Also can this be done with single element, like example stated above?

html css
Edit
Report