IE11で、円形の中にテキストをはみ出さないように表示させたい

IE11で、円形の中にテキストをはみ出さないように表示させたいです。

https://www.mitsue.co.jp/knowledge/blog/frontend/201905/30_1655.html
こちらを参考に、shape-outsideを使用し円形にテキストを表示するようにしました。

IE11ではshape-outsideは反映されないので、shape-outsideをIE対応させる以下のcss-shapes-polyfillを使用しましたが、表示が崩れてしまいました。
https://github.com/adobe-webplatform/css-shapes-polyfill

該当のソースコード

html
1<div class="box shape-inside">
2  <div class="left"></div>
3  <div class="right"></div>
4  <ul><li>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</li></ul>
5</div>

css
1.box {
2  padding: 5px;
3  width: 200px;
4  height: 200px;
5  border-radius: 50%;
6  border: 2px solid #9d9d9d;
7  box-sizing: border-box;
8}
9.left,
10.right {
11  height: 200px;
12  width: 33.33%;
13  clear: none !important;
14}
15.left {
16  float: left;
17  shape-outside: polygon(0% 0%, 0% 100%, 100% 100%, 0% 70%, 0% 30%, 100% 0%);
18}
19.right {
20  float: right;
21  shape-outside: polygon(100% 0%, 100% 100%, 0% 100%, 100% 70%, 100% 30%, 0% 0%);
22}

css-shapes-polyfillの影響でshapes要素にclearがかかっていたので、clear: noneを入れてみましたが片側しか反映されませんでした。

css
1.box div:nth-child(1),
2.box div:nth-child(2){
3clear: none !important;
4}

IE11で、円形の中にテキストをはみ出さないように表示させる方法はあるのでしょうか？
ご教授いただけましたら幸いです。

行動規範の内容に同意します

回答2件

IE11で、円形の中にテキストをはみ出さないように表示させる方法はあるのでしょうか？

CSS以外の別の方法を検討する必要があります。

IE11 標準で未対応の機能を偽装するために JavaScriptによる polyfill を導入されています.

この polyfill を用いても対応できない場合にできることは 3つです。

別の方法で対応する（yambejp さんの回答も代替案の一つです：SVGを使う）。

SVGの他にも、Canvasで画像として表現する方法もあるはずです。
別の方法（代替案）は時間コストも比較的抑えつつも期待する表現ができるのではないでしょうか。
2. polyfill の上位互換となるよう、JavaScriptで追加実装する（CSSに拘る場合はこの方法になります）。
時間コストこそ必要ですが、JavaScriptで polyfillの実装を拡張して対応します。
スクラッチでライブラリを書いた経験があるのであれば、不可能ではないはずです。
3. 表現を諦める。
上記のどちらも採用できない場合は表現を諦めるしかありません。

投稿2020/07/17 22:00