Ich versuche herauszufinden, wie man Warenkorb Tab, die in der rechten Ecke positioniert und auch 90 Grad gedreht werden würde. Die Drehung mischt natürlich die Position, aber vielleicht gibt es einen Workaround des Umwickelns zu verschiedenen Wrappern usw. ...absolute Position gedrehtes Element zur rechten Ecke
Zusätzliche Punkte, wenn die Breite nicht definiert werden müsste. Ich interessiere mich nicht für ältere Browser
Wie wäre es mit transform-origin? Siehe DEMO.
Relevante 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 */
}
Brilliant wow, das hätte ich nie realisiert. Ich werde es versuchen. DANKE! – client
Danke für diesen tollen Vorschlag! Gibt es eine verbindliche Beschreibung der Unterstützung in verschiedenen Browsern für "Transform-Origin"? Der [MDN-Artikel] (https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin#Browser_compatibility) ist im Moment ziemlich unvollständig. – bfncs
Soweit ich weiß, wird es in jedem Browser unterstützt, der Transformationen unterstützt. http://caniuse.com/#feat=transforms2d – Ana
Ana's answer ist ausgezeichnet und wies mich in die richtige Richtung, aber ich erkannte Sie den gleichen Effekt erzielen können, ohne explizit die Höhe, line-height und Position für das Element zu haben Sie bewegen wollen - stattdessen setzen nur translate(0, -100%):
body {
margin: 0;
}
#box {
position: relative;
}
.bg {
\t right: 0;
\t padding: 1em;
\t transform: rotate(-90deg) translate(0, -100%);
\t transform-origin: 100% 0;
\t position: absolute;
\t background: #FF1493;
}<div id="box">
\t <div class="bg">
\t \t <div class="txt">He's not the Messiah. He's a very naughty boy.</div>
\t </div>
</div>... und eine jsFiddle für ein gutes Maß.
http://jsfiddle.net/Dvkgz/ – client