How to make uneven text wrapping (not square or round) like this with semantic and pure HTML, CSS?

Question

How to make text wrapping this way with semantic and pure HTML, CSS? Compatible in all browsers.

Adding different classes to <p>is the only solution that I think of if there is no other solution.

but at the same time, each time the client will not be able to change classes, which is a drawback.

Answer 1

You can set the image as the background on <p>, and then place the transparent containers at the top of the background image in a form that you do not want to overlap text.

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

With the following 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;
}

, , , . .