Обтекание текста в изогнутой форме вокруг изображения

Question

Я хочу обернуть текст в овальной форме вокруг изображения, но текст будет перекрываться над изображением. Я попробовал изменить функции border-radius, width и height и т. Д. Элемента скремблирования (например, изображение), но он не работает. Ниже мой 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

Добавьте это в CSS

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

Увеличение пикселы, если вы хотите.

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>