Comment puis-je aligner du texte le long d’une ligne inclinée à l’aide de CSS ?

Aligner le texte sur une ligne inclinée avec l'alignement vertical du texte

Atteindre l'alignement à gauche du texte le long d'une ligne inclinée peut être un défi. Cependant, les techniques CSS peuvent fournir une solution prenant en charge Internet Explorer 9 et versions ultérieures.

Approche CSS avec transformation et rotation négative

Une méthode consiste à utiliser la propriété transform avec un angle de rotation négatif. Cette approche consiste à faire pivoter l'élément d'image et à ajuster sa marge pour obtenir l'alignement souhaité.

Implémentation HTML et CSS :

<code class="html"><div>
  <img src="image.png" style="display: block; float: left; transform: rotate(-5deg); margin: 0 15px;">
  <p>Lorem ipsum dolor sit amet...</p>
</div></code>

<code class="css">p {
  transform: rotate(5deg);
}</code>

MOINS Solution avec tailles d'éléments calculées

Une autre approche consiste à utiliser LESS pour créer une série d'éléments rectangulaires qui simulent la ligne inclinée. La largeur de chaque élément est calculée en fonction de la tangente de l'angle incliné.

Code LESS :

<code class="less">@hSize: 15px;

.space {
  float: left;
  clear: left;
  width: @hSize;
  height: @hSize;
}

.loop(@i) when (@i > 0) {
  .loop((@i - 1));
  .space@{i} {
    width: floor(@i*@hSize/(1/tan(5deg)));
  }
}</code>

Implémentation HTML :

<code class="html"><p>
  <span class="space space1"></span>
  <span class="space space2"></span>
  <!-- (...) -->
  <span class="space space11"></span>
  Lorem ipsum dolor sit amet...
</p></code>

Bien que la solution LESS soit plus complexe, elle permet un alignement plus précis, notamment pour les passages de texte plus longs. Les deux approches offrent des solutions viables pour aligner du texte sur une ligne inclinée, le choix dépendant du niveau de précision souhaité et des exigences de compatibilité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!