[résolu] Text dans div alignement vertical avec rotation

Gillesg
Les bases HTML/CSS

Décrivez ici votre problème ou ce que vous cherchez à faire.
Bonjour,
Je cherche une méthode pour avoir un affichage correct d'un texte cadré en bas à droite avec une rotation. 

<div class="grid-layout five-columns grid-layout--vertical">
  <div class="grid-layout_item grid-layout_item--card">
    <div class="static-card isVertical">
      <img src="http://localhost:8080/img/cards.fr/alchemy/alchemist.jpg" class="static-card__img">
    </div>
    <div class="bane-card-cover">
      <div class="bane-card-cover-text">
        Fléau
      </div>
    </div>
  </div>
  <div class="grid-layout_item grid-layout_item--card">
    <div class="static-card isVertical">
      <img src="http://localhost:8080/img/cards.fr/alchemy/alchemist.jpg" class="static-card__img">
    </div>
    <div class="bane-card-cover">
      <div class="bane-card-cover-text">
        Obelisk
      </div>
    </div>
  </div>
</div>

Les styles que j'utilise

 .grid-layout {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  position: relative;
}

.grid-layout_item {
  pointer-events: none;
  position: relative;
}

/**
 * Shape layouts. 
 * The padding-bottom is 'flex-basis * card height / card width'.
 */
.grid-layout--vertical.five-columns .grid-layout_item--card {
  flex-basis: 19.5%;
  padding-bottom: 31.16%; /* 19.5 * (473 / 296) */
  margin: 0.25%;
}
.static-card {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.static-card,
.static-card__img {
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
}

.bane-card-cover {
  width: 100%;
  height: 100%;
  position: absolute;
  box-sizing: border-box;
  border: 5px solid #b78eca /* curse-color */;
}

.bane-card-cover-text {
  transform: rotate(0.75turn);
  color: white;
  background: #b78eca /* curse-color */;
  position: absolute;
  bottom: 9px;
  right: -17px;
  padding: 6px 12px;
}

Ce que je veux
Je souhaite positionner prorement via CSS les div aprsè rotation en bas à droite du cadre "bane-card-cover"

Ce que j'obtiens
Mon problème est qu'en fonction du texte, il faudrait que j'adapte les offset (bottom et right)

Si vous avez des idées je suis preneur.

4 réponses

callin

saluut tout le monde...moi aussi je cherche une méthode pour avoir un affichage correct sil vous plait

popotte

Hello, mmmh alors pour commencer on dirait que tu fait un hack pour faire un système de grid en CSS, tu devrait utiliser le système de grid directement (pas besoind eBootstrap, CSS a sortit un systèmpe de grid natif)
Ensuite pas mal de absolute, CSS n'aime pas trop

en vrai tu devrait faire une div absolute, à l'intérieur tu fait une div relative que tu rotate à 90d, et à l'intérieur tu places ta div texteen absolute, en bas à gauche (mais comme le parent est rotate en vrai visuellement ce sera en bas à droite)

On ne rotate pas directement la div texte, CSS n'aime pas ^^'

Gillesg
Auteur

Merci ca marche bien avec 

  position : relative;
  transform: rotate(0.75turn);
  bottom: -71%;
  right: -35%;
}

.card-cover-text {
  position: absolute;
  padding: 6px 12px;
}
popotte

Top ^^

En espérant que CSS prenne en charge le texte vertical dans sa prochaine version (faudra checker la W3 voir si y'a des news :p)