Как сделать неравномерное обтекание текста (не квадратным или круглым) подобным образом с помощью семантического и чистого HTML, CSS?

Question

Как сделать обтекание текста таким семантическим и чистым HTML, CSS? С совместимостью во всех браузерах.

Добавление разных классов к <p> - единственное решение, которое я думаю, если нет другого решения.

но при этом каждый раз клиент не сможет менять классы, что является недостатком.

Answer 1

Вы можете установить изображение в качестве фона на <p>, а затем переместить прозрачные контейнеры поверх фонового изображения в форме, чтобы текст не перекрывался.

<p>
    <span id="block1"></span>  
    <span id="block2"></span>  
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...
</p>

С помощьюследующий CSS:

p {
   background: url(your-image.png) no-repeat 100% 0;
}

#block1 {
   float: right;
   width: 100px;
   height: 100px;
}

#block2 {
   clear: both;
   float: right;
   width: 200px;
   height: 50px;
}

Недостатком является то, что, как и в случае с вашим классом абзацев, это очень ручное исправление.Вы можете увидеть это в действии здесь .