CSSを使用してテキストを円の周りにラップする方法

CSSを使用して段落テキストブロックを円形要素の周りに折り返す方法。

コンテンツのプレゼンテーションをもう少し面白く、雑誌のようにしたい場合は、CSSを使用して、テキストを興味深い方法で要素に揃えて折り返すことができます。

まず、HTMLコンテンツを追加しましょう：

<article class="post">
  <img
    class="circle"
    src="https://www.fwz-elektrotechnik.de/wp-content/uploads/2014/11/Globus-Wikipedia-Kopie-1.png"
    alt="A globus"
  />

  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia fuga
    possimus dolorum ea, fugiat facere sapiente natus excepturi numquam
    explicabo praesentium aliquid quam ut sint voluptas omnis, quis, est vitae?
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia fuga
    possimus dolorum ea, fugiat facere sapiente natus excepturi numquam
    explicabo praesentium aliquid quam ut sint voluptas omnis, quis, est vitae?
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia fuga
    possimus dolorum ea, fugiat facere sapiente natus excepturi numquam
    explicabo praesentium aliquid quam ut sint voluptas omnis, quis, est vitae?
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia fuga
    possimus dolorum ea, fugiat facere sapiente natus excepturi numquam
    explicabo praesentium aliquid quam ut sint voluptas omnis, quis, est vitae?
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia fuga
    possimus dolorum ea, fugiat facere sapiente natus excepturi numquam
    praesentium aliquid quam ut sint explicabo praesentium aliquid quam ut sint
    voluptas omnis, quis, est vitae?
  </p>
</article>

<article>に注意してください 要素にはpostというクラスがあります および<img> 要素には.circleというクラスがあります 。

次に、次のCSSを追加します。

.post {
  max-width: 800px;
  margin: 3rem auto;
}

.circle {
  float: right;
  height: 30vw;
  margin-left: 1rem;
  margin-left: calc(1rem + 2vw);
  object-fit: cover;
  shape-outside: circle(50%);
  width: 30vw;
}

結果は次のようになります。

悪くないですよね？

「魔法」はshape-outsideに由来します 最新のすべてのブラウザでサポートされているCSSプロパティですが、InternetExplorerではサポートされていません。