css - 要素を右隅に回転させた絶対位置

Question

右隅に配置され、90度回転するショッピングカートタブを作成する方法を見つけようとしています。回転は自然に位置を混ぜますが、別のラッパーにラップするなどの回避策があるかもしれません....

幅を定義する必要がない場合は、余分なポイント。古いブラウザは気にしない

Answer 1

を使用してはtransform-originどうですか？デモを参照してください。

関連する CSS:

#box {
    position: relative;
}
.bg {
    right: 40px; /* same as height */
    height: 40px;
    transform: rotate(-90deg);
    transform-origin: 100% 0;
    position: absolute;
    line-height: 40px; /* same as height, for vertical centering */
}

Answer 2

アナの答えは素晴らしく、私を正しい方向に向けてくれましたが、移動したい要素の高さ、行の高さ、位置を明示的に設定しなくても同じ効果を達成できることに気付きました-代わりに、設定するだけですtranslate(0, -100%):

body {
  margin: 0;
}

#box {
  position: relative;
}

.bg {
	right: 0;
	padding: 1em;
	transform: rotate(-90deg) translate(0, -100%);
	transform-origin: 100% 0;
	position: absolute;
	background: #FF1493;
}

<div id="box">
	<div class="bg">        
		<div class="txt">He's not the Messiah. He's a very naughty boy.</div>
	</div>
</div>

...そして、適切な測定のためのjsFiddle。

Answer 3

If you need to position wrapper div.and rotate child div so that its always centered vertically and horizontally, try something like this!

.togglewrap{
position:relative;
float:left;left:20%;top:0;
width:30px; 
height:120px;
background-color: #ffde21;
}
.sbartoggle {
    background:#f5f5f5;
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    margin:auto;
    width:100%; 
    height:30px;/*equal to parent width*/
    line-height:30px;/*center text*/
    transform: rotate(-90deg);
    background-size:10px 10px;
    }