ＣＳＳで「画像ではなく」文字を回り込ませたいです。

Question

できるかどうかわかりませんけれど、、

「文字を、文字が回り込む」ってできませんでしょうか？

「画像が、文字を回り込む」のならわかるのですけれど、、下記のようなことです。

▼▼サンプル▼▼
https://jsfiddle.net/6frmtbmx/1/

▼▼サンプルのコード▼▼

<article class="sample">

<section>
<div class="mawarikomi">まわりこませたい</div>
<p>ここに文字を書くときに、ピンク色を回り込んで表示させたいのです。けれど、ピンク色は画像ではないので、回り込ませ方がわかりません。</p>
</section>

</article>

.sample {
    position: relative;
    padding: 20px;
    width: 50%;
    background: #ddd;
}

.sample .mawarikomi {
    position: absolute;
    top: 80px;
    right: 5px;
    width: 100px;
    height: 100px;
    background: #FF6565;
    display: flex;
    align-items: center;
}
  

ピンク色の回り込ませたい部分は右下に来てほしいので、

position: absolute;
top: 50%;

が欠かせず、しかしそうすると文字がピンク色のところにかぶってしまい、困っております。

CSS博士の方、どうぞよろしくお願い致します。

Answer 1

こんな感じ？

http://jsdo.it/defghi1977/q58s

※Chromeでのみ動作を確認. FireFoxでは不可.

.sample {
    position: relative;
    height: 170px;/*縦方向のサイズが確定していないと駄目っぽい*/
    width: 50%;
    background: #ddd;
}

/*文字を回り込ませるための細工*/
.sample:before{
    --shape:  polygon(calc(100% - 100px) calc(100% - 100px), 100% calc(100% - 100px), 100% 100%, calc(100% - 100px) 100%);
    content: "";
    float: right;
    width: 100%;
    height: 100%;
    shape-outside: var(--shape);
    clip-path: var(--shape);
    background-color: #FF6565;
}

/*回り込ませた部分の上にboxを配置*/
.sample .mawarikomi {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100px;
    height: 100px;
}

NOTE:

• padding等の設定を追加すると容易に位置がずれるので制御が難しい. 生のCSSで管理するのはリスクが高いかもしれない.
• ざっと見, stackoverflowでも度々話題に上がっているものの, これと言った解決策が見つかっていないようです.
• SVG2で検討されているshape-insideが使えるようになると(いつ?), 任意領域に対するテキストの流し込みが出来るようになるようです.

Comments

[退会済みユーザー]

びっくりしました。「polygon」や「ver」なんて初耳もいいとこです。ファイアフォックス惜しいですね~！！どうもありがとうございます。一流CSSプレイヤーに認定いたします★笑

Answer 2

<article class="sample">
<section>
<span class="mawarikomi">まわりこませたい</span>
<p>ここに文字を書くときに、ピンク色を回り込んで表示させたいのです。けれど、ピンク色は画像ではないので、回り込ませ方がわかりません。
ここに文字を書くときに、ピンク色を回り込んで表示させたいのです。けれど、ピンク色は画像ではないので、回り込ませ方がわかりません。
ここに文字を書くときに、ピンク色を回り込んで表示させたいのです。けれど、ピンク色は画像ではないので、回り込ませ方がわかりません。</p>
</section>
</article>

span.mawarikomi {
	float: left;
	display: inline-block;
	padding: .5em;
	background-color: beige;
}
```**動くサンプル：**[https://jsfiddle.net/2h4vn4kn/](https://jsfiddle.net/2h4vn4kn/)

Comments

[退会済みユーザー]

質問が明らかに悪かったです。すみません。

ピンク色の範囲は「右下」に来てほしいのです。

その方法はabsoluteを使うことしか知らず、しかしabsoluteを使うと文字がピンク色の部分とかぶってしまうので、困っている。と、いう次第なのです。

[kei344]

右下に回りこむ方法はほとんどないので、構成を考え直すほうがよいと思います。

[退会済みユーザー]

やはり無理でしたか。ありがとうございます！kei344さんのご回答ならば納得するしかないです。

困りますね。どうして「float:右下;」とか作らなかったのでしょうね。。

ところで、「float:left;を設定すると、左にくる」のような、CSSを動かすさらに根底にある言語はなんというのですか？

そしてもし、その言語を知ってるのならば、存在しない「float：右下;」を作ることも可能なのでしょうか？（やりませんけど笑）

[kei344]

とりあえずHTML/CSSの書籍でも買って概念を知ってから触られたほうがよいですよ。

[退会済みユーザー]

ありがとうございます!!

[退会済みユーザー]

おはようございます。すみません、今回はちょっとスゴイご回答を頂戴したので、これはさすがにベストアンサーを変更させてください。ごめんなさい。m(_ _)m