position absolue élément pivoté dans le coin droit

Im essayant de comprendre comment faire de panier onglet qui serait positionné sur le coin droit et aussi une rotation de 90 degrés. La rotation naturellement mélanges de la position, mais il existe peut-être une solution d'emballage à différents wrappers etc....

Des points supplémentaires si il n'y aurait pas besoin de définir la largeur. Je n'ai pas de soins sur les anciens navigateurs

source d'informationauteur client

  1. 24

    Comment sur l'utilisation de transform-origin? Voir DÉMO.

    Pertinentes 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 */
}
  2. 0

    Faire pivoter le texte à 90° à l'aide de CSS, pensez à utiliser writing-mode.

    Ensemble position: relative; sur le div parent, puis utiliser quelque chose comme ceci sur la rotation de l'élément:

    #rot {
    position: absolute; /* only handy here because its parent is set to `position: relative;` */
    left: 0;
    top: 0px;
    /* writing-mode: sideways-lr;   /* Webkit browsers don't support `sideways-lr` yet */
    writing-mode: vertical-rl;  /* `vertical-rl` and a rotation will achieve the same effect */
    transform: scaleX(-1) scaleY(-1);
    height: 100%;

    background: rgba(0, 0, 0, 0.1);
    text-align: center;
    line-height: 2.85;
    color: white;
    font-weight: bold;
}

    Vous vous retrouverez avec un div empilés sur le côté de votre div parent, avec le texte à un angle de 90°.

    De cette façon, vous n'avez pas à penser à propos de l'origine de la rotation.