CSS を使用してテキストを斜めの線に沿って配置するにはどうすればよいですか?

垂直テキスト配置を使用して斜めの線にテキストを配置する

斜めの線に沿ってテキストを左揃えにするのは難しい場合があります。ただし、CSS テクニックは、Internet Explorer 9 以降をサポートするソリューションを提供できます。

変換と負の回転を使用した CSS アプローチ

1 つの方法は、transform プロパティを使用することです。負の回転角度。このアプローチでは、画像要素を回転し、目的の位置に配置するために余白を調整する必要があります。

HTML および 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>

LESS計算された要素サイズによる解決策

もう 1 つのアプローチでは、LESS を使用して、斜線をシミュレートする一連の長方形要素を作成します。各要素の幅は、傾斜角の正接に基づいて計算されます。

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>

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>

LESS ソリューションはより複雑ですが、特に長いテキストの場合には、より正確な位置合わせが可能です。どちらのアプローチも、テキストを斜めの線に配置するための実行可能なソリューションを提供し、必要な精度と互換性の要件に応じて選択できます。

以上がCSS を使用してテキストを斜めの線に沿って配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。