画像を曲線の形で包む

Question

画像を楕円形に折り返したいが、テキストは画像の上に重なっている。 wraping要素（イメージなど）のプロパティなどを変更しようとしましたが、機能しません。以下は私のHTMLとCSSのコードは次のとおりです。

HTML：

<div id="circular-shape"> 
<img src="blackberries-basket.jpg" class="curve"> 
<p>/*...text to wrap around circle side...*/ 
</p> 
</div> 

CSS：私は左の画像を重ね/触れるからテキストを停止することができますどのように

#circular-shape { 
    font-family: Open Sans, sans-serif; 
    margin: 2rem; 
} 
#circular-shape p { 
    line-height: 1.8; 
} 

#circular-shape .curve { 
    width: 33%; 
    height: 33%; 
    min-width: 250px; 
    float: left; 
    border-radius: 50%; 
    -webkit-shape-outside:circle(); 
    shape-outside:circle(); 
} 

。助けてください。

Answer 1

は、あなたがしたい場合は、画素を増やし

p { 
    position: relative; 
    left: 35px; 
} 

あなたのCSSにこれを追加します。

Answer 2

だけのマージンを追加します。

img { 
 
    float: left; 
 
    margin: .5em; 
 
    border-radius: 50%; 
 
    -webkit-shape-outside: circle(50%); 
 
    shape-outside: circle(50%); 
 
}

<div class="wrap"> 
 
    <img src="http://www.fillmurray.com/g/100/100" alt="" /> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ipsam harum enim omnis, iure laboriosam perferendis neque minima aspernatur culpa recusandae sunt quae minus, est quo ipsum ipsa laborum aperiam itaque facere sequi similique dignissimos 
 
    repellendus excepturi! Doloribus, voluptate! Voluptatibus facere nisi nesciunt aliquid maxime vitae soluta earum sint quis distinctio, molestias quod dicta deleniti debitis accusantium at fugiat illum voluptatum dignissimos dolore temporibus obcaecati 
 
    sunt non. Amet, et? Consequatur iusto nihil blanditiis amet placeat deleniti perspiciatis odit esse officia, dolor molestiae illum quo maiores quia nam delectus ut libero temporibus eveniet aperiam, nemo cupiditate, similique porro reprehenderit. 
 
    Molestiae, perspiciatis!</p> 
 
</div>