丸みを帯びた Div でテキストを折り返すにはどうすればよいですか?

テキストを含めるために丸みを帯びた Div を拡張する

多くのプロジェクトでは、テキストをシームレスに含めるために丸みを帯びた Div が必要です。ただし、デフォルトでは、丸い div ではテキストが正方形のままになることがよくあります。 CSS は、この問題に対処するソリューションを提供します。

Shape-Outside: A Modern Approach

Shape-Outside プロパティを使用すると、非長方形のシェイプの周囲にインライン コンテンツをラップできます。これにより、デザイナーは複雑なオブジェクトや円の周囲などのラッピングをカスタマイズできます。ブラウザによるシェイプアウトサイドのサポートを考慮する必要があります。

グラデーションと擬似要素テクニック

放射状グラデーションと擬似要素の組み合わせにより、円形の領域を作成できます。それはテキストをはじきます。正方形のボックスから始めて、円の中心の外側に描かれた放射状のグラデーションを持つ 4 つの浮遊擬似要素を使用します。必要な領域をカバーするようにグラデーションを調整します。

たとえば、次の CSS および HTML コードは目的の効果を実現します。

div {
  width: 10em;
  height: 10em;
  border-radius: 50%;
  background: #333;
}

div:before {
  content: '';
  float: left;
  clear: left;
  height: 5em;
  width: 5em;
  background: radial-gradient( circle at bottom right, transparent 69%, red 69%);
}

div:after {
  content: '';
  float: right;
  clear: right;
  height: 5em;
  width: 5em;
  background: radial-gradient( circle at bottom left, transparent 69%, red 69%);
}

<div>
  <div class="shape"></div>
  <div class="shape">

以上が丸みを帯びた Div でテキストを折り返すにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。