CODEWITHSUNDEEP
htmlcss
user3550879
user3550879

Reputation: 3469

bottom right, rotated text

I have the following code which comes close to what I want but it doesn't sit exactly bottom right.

#top-btn a {
  position: fixed;
  display: block;
  z-index: 500;
  height: 40px;
  padding: 20px;
  margin: 0;
  bottom: 0;
  right: 0;
  transform: rotate(-90deg);
  transform-origin: bottom left;
}
<div id='top-btn'>
  <a href="..." onclick="...">Back Up</a>
</div>

Upvotes: 1

Views: 75

Answers (4)

shaochuancs
shaochuancs

Reputation: 16226

There are several reasons that <a> does not sit exactly bottom right:

  1. height and padding is not necessary. It only expand the size of <a> after rotation and bring problems.
  2. I can understand why you define transform-origin as bottom left now -- without it, part of <a> would be invisible. However, this setting leaves blank area at the right side of <a> -- the width of the blank area is exactly the origin width of <a>. This is why @DDan and @Zhenya Telegin's answer uses negative margin-right to solve the problem. But as the margin-right value is a fixed number, it only works for "Back Up".

If the bottom-right text is dynamic, the margin-right value should be dynamic too. Here is a solution with JavaScript:

var ele = $('#top-btn a');
ele.css('margin-right', -ele.width()+'px');
#top-btn a {
  position: fixed;
  display: block;
  z-index: 500;
  margin: 0;
  bottom: 0; right: 0;
  transform: rotate(-90deg);
  transform-origin: bottom left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='top-btn'>
   <a href="..." onclick="...">Back Up</a>
</div>

I tried several pure CSS solutions but all failed, looking forward if someone solve this problem with pure CSS.

Upvotes: 2

Jalen Davenport
Jalen Davenport

Reputation: 342

I've got it working like you described in the following snippet. Like the others said the height thing is problematic. However, I didn't bother messing with a right margin but instead solved it with transform-origin percent values. 

#top-btn a {
  position: fixed;
  display: block;
  z-index: 500;
  padding: 20px;
  margin: 0;
  bottom: 0;
  right: 0;
  transform: rotate(-90deg);
  transform-origin: 50% 10%;
}
<div id='top-btn'>
  <a href="..." onclick="...">Back Up</a>
</div>

Update

I've found an even better solution that works for text of any length. Check out the fiddle for the better solution.

Upvotes: 0

DDan
DDan

Reputation: 8276

Two tricks you can do here:

  • Leave out transform-origin
  • You can set negative right margin to move it more to the side. See margin-right in css.

#top-btn a {
  direction: rtl;
  position: fixed;
  display: block;
  z-index: 500;
  height: 40px;
  padding: 20px;
  margin: 0;
  bottom: 0;
  right: 0;
  transform: rotate(-90deg);
  margin-right: -40px; 
}
<div id='top-btn'>
  <a href="..." onclick="...">Back Up</a>
</div>

Upvotes: 0

Zhenya Telegin
Zhenya Telegin

Reputation: 587

I think the rotate cause problem... You can remove height: 40px; and add negative margin right margin-right: -55px;

#top-btn a {
  position: fixed;
  display: block;
  z-index: 500;
  margin: 0;
  bottom: 0;
  right: 0;
  transform: rotate(-90deg);
  transform-origin: bottom left;
  margin-right: -55px;
}
<div id='top-btn'>
  <a href="..." onclick="...">Back Up</a>
</div>

Upvotes: 0

Related Questions