Comment puis-je aligner du texte à gauche le long d'une ligne inclinée dans IE9 ?

Alignement du texte sur une ligne inclinée

Question :

Le texte peut-il être aligné à gauche le long d'une ligne inclinée tout en suivant l'angle de l'image inclinée et supportant IE9 ?

Solution :

Utiliser LESS :

Pour obtenir l'alignement souhaité , vous pouvez ajouter des éléments carrés supplémentaires et calculer leur taille en utilisant LESS :

<code class="less">.loop(@i) when (@i > 0){
  .loop((@i - 1));
  .space@{i}{
    width: floor(@i*@hSize/(1/tan(5deg)));
  }
}
@hSize: 15px;
.space {
  float: left;
  clear: left;
  width: @hSize;
  height: @hSize;
}</code>

HTML :

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

Preuve de concept :

http://codepen.io/Tymek/pen/jEypOX?editors=110

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!