CSSの shape-outsideプロパティ・shape-marginプロパティのサンプルです。
フロートさせた要素をクリッピングした時、クリッピングしたシェイプに沿ってテキストを回り込ませます。
＜サンプル1＞
<img>要素に float、clip-path、shape-outsideプロパティを指定。
shape-marginプロパティでテキストとのマージンも指定しています。
The shape-outside property
User agents must use the potentially CORS-enabled fetch method defined by the [HTML5] specification for all URLs in a shape-outside value. When fetching, user agents must use "Anonymous" mode, set the referrer source to the stylesheet’s URL and set the origin to the URL of the containing document. If this results in network errors such that there is no valid fallback image, the effect is as if the value none had been specified.
HTMLはこちら
<div class="sample clearfix">
<img src="img/image.jpg" class="c-image">
<h1>The shape-outside property</h1>
<p>User agents must use ...略...</p>
</div>
CSSはこちら
.clearfix:after {content:''; display:table; clear:both}
.sample {
width:100%;
min-width:600px;
margin:20px auto;
padding:1em 0;
border:#ccc solid 1px}
.sample > h1, .sample > p {line-height:1.8; margin:1em 2em}
.c-image {
float:left;
width:40%;
-webkit-clip-path:ellipse(25% 48% at 60% 50%);
clip-path:ellipse(25% 48% at 60% 50%);
-webkit-shape-outside:ellipse(25% 48% at 60% 50%);
shape-outside:ellipse(25% 48% at 60% 50%);
-webkit-shape-margin:2em;
shape-margin:2em}
＜サンプル2＞
フロートとクリッピングを指定した<div>要素の背景（background）に画像を指定。
The shape-outside property
User agents must use the potentially CORS-enabled fetch method defined by the [HTML5] specification for all URLs in a shape-outside value. When fetching, user agents must use "Anonymous" mode, set the referrer source to the stylesheet’s URL and set the origin to the URL of the containing document. If this results in network errors such that there is no valid fallback image, the effect is as if the value none had been specified.
HTMLはこちら
<div class="sample2 clearfix">
<div class="element"></div>
<h1>The shape-outside property</h1>
<p>User agents must use ...略...</p>
</div>
CSSはこちら
.clearfix:after {content:''; display:table; clear:both}
.sample2 {
width:100%;
min-width:600px;
margin:20px auto;
padding:0;
border:#ccc solid 1px}
.sample2 > h1, .sample2 > p {line-height:1.8; margin:1em 2em}
.element {
width:40%;
height: 300px;
float: left;
background-image:url(../img/lavender.jpg);
background-size:cover;
background-position:left center;
background-repeat:no-repeat;
-webkit-clip-path:ellipse(70% 90% at 0% 50%);
clip-path:ellipse(70% 90% at 0% 50%);
-webkit-shape-outside:ellipse(70% 90% at 0% 50%);
shape-outside:ellipse(70% 90% at 0% 50%);
-webkit-shape-margin:2em;
shape-margin:2em}
＜サンプル3＞
shape-marginプロパティ を使わずに、margin-right を使った例。
The shape-outside property
User agents must use the potentially CORS-enabled fetch method defined by the [HTML5] specification for all URLs in a shape-outside value. When fetching, user agents must use "Anonymous" mode, set the referrer source to the stylesheet’s URL and set the origin to the URL of the containing document. If this results in network errors such that there is no valid fallback image, the effect is as if the value none had been specified.
HTMLはこちら。（インラインでCSSを追加しています=2行目）
<div class="sample2 clearfix">
<div class="element" style="-webkit-shape-margin:0; shape-margin:0; margin-right:2em"></div>
<h1>The shape-outside property</h1>
<p>User agents must use ...略...</p>
</div>