円の内側に、文章の段落を円形に表示させる方法が 分かりません

Question

CSS に　円形の段落表示方法として　shape-inside という新しい記法が４－５年前から発表されたと、何か所かのページで紹介されていましたが、実際のコードが公表されておらず、自己流でコードを試してみましたが、まったく作動しませんでした。

https://cms-assets.tutsplus.com/uploads/users/1438/posts/27498/image/shape-outside-inside.jpg

見本の画像です。

https://webdesign.tutsplus.com/tutorials/how-to-use-css-shapes-in-your-web-design--cms-27498

出典が上のサイトです。

以下のコードのどこを直せばよいでしょうか。
よろしくお願いいたします。

.wrapper {
padding: 10px;
max-width: 400px;
}

.circle {
width: 200px;
height: 200px;
background-color: pink;
border-radius: 50%;
shape-inside: circle();
} 

<div class="wrapper ">

<div class="circle">
<p>  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio ducimus, minus distinctio quae alias velit vel quas aliquid
</p>
</div>
</div> 

Comments

[x_x]

https://teratail.com/questions/161090 とは違うのでしょうか？

Answer 1

当初のシェイプ仕様書には、要素内にシェイプを作成するための shape-inside プロパティが含まれていました。このプロパティは、浮動状態ではないシェイプを作成することができる機能と共に、仕様書のレベル２に移動されました。当初は shape-inside が仕様書のレベル１に含まれていたため、ウェブ上のチュートリアルには両方のプロパティの詳細が書かれているかもしれません。

将来の CSS シェイプ機能

レベル2は草案段階です。実装されているブラウザは、ほぼないのではないでしょうか。
CSS Shapes Module Level 2

Answer 2

こちらの回答が参考になると思います
過去質問