Contour image with CSS text

Unfortunately, I believe that what you want is not possible. The boundaries of HTML elements are all, by default, rectangles. You can even rotate them so that they become diamonds or other shapes, but in the end you will still have elements with boundaries set on four sides. Note that this is because the HTML engine of browsers does not take into account things like the transparency of the images.

It is not possible, with just HTML , Javascript and CSS , to cause the text to flow around a transparent image. You can try two alternatives:

• Spot alternative: You can include direct text in the image. The advantage is that in this way you can do something really beautiful and that will have the same presentation in any browser. The disadvantage is that this requires a specific job for each different image - it is not possible to easily reuse the solution between different images.

• McGyver Alternative: You can make the image float over other components (ie: position: absolute (or fixed )), and put several div 's without text, but with width, behind the image. Each div would have a different length according to its need. The advantage is that it is not necessary to edit the image. But beyond the same disadvantage of the previous method, you will need to test this in each browser and potentially have to develop a formatting for each different browser. Disclaimer Given the size of gambiarra, this solution condemns your soul to an eternity of torments in hell after your disincarnation.

P.s:

  

I'm developing a website, but without using any framework for it (...)

You can look at the code as parts, and the frameworks as tools. It is quite possible to attach a nail to a wall or a bolt on a board without the use of hammers or screwdrivers, but you will get hurt. Enough. And your friends will question your sanity. With programming it's not much different.

I will post a more current answer, however it is not fully crossbrowser, it does not work on IE or Edge, and only works on the latest version of FireFox (version 62+)

The idea here is to use the shap-outside property with a .png transparent background or clip-path and use it as a "mask" to float the text around the image. With this you get the effect of the text by skirting the image. In the case of .png it is the alpha channel that will cause the text to bypass the image, and in the case of clip-path it is the shap itself that will handle it. Detail that you may need margins or padding to move text away from the image giving a breather between text and image.

• Here you can check your browser's support for shap-outside : link
• You can check your browser's support for clip-path here: link

.box {
    box-sizing: border-box;
    padding: 1rem;
    width: 400px;
}
.imagem {
    width: 80px;
    height: 80px;
    float: left;
    shape-outside: url(https://vignette.wikia.nocookie.net/mario/images/0/0c/1000px-Mario_NSMB2.png/revision/latest?cb=20120920202215&path-prefix=pt-br);
    background-size: 80px 80px;
    padding-left: 15px;
    padding-right: -15px
}
.star {
    width: 80px;
    height: 80px;
    float: left;
    -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); 
    shape-outside: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    background-color: red;
    background-size: 100px 100px;
    margin-right: 1em;
}
.svgs {
width: 100px;
height: 100px;
float: left;
shape-outside: url(https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg);
background-size: 100px 100px;
}

<div class="box">
    <img class="imagem" src="https://vignette.wikia.nocookie.net/mario/images/0/0c/1000px-Mario_NSMB2.png/revision/latest?cb=20120920202215&path-prefix=pt-br"alt="">
    <b>Usando .PNG</b>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Expedita animi consequatur modi voluptates ea nobis veritatis accusantium vitae, earum officia?</p>
</div>

<div class="box">
    <div class="star"></div>
    <b>Usando clip-path</b>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Expedita animi consequatur modi voluptates ea nobis veritatis accusantium vitae, earum officia? </p>
</div>

<div class="box">
    <img class="svgs" src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg"alt="">
    <b>SVG não funciona no shap-outside</b>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Expedita animi consequatur modi voluptates ea nobis veritatis accusantium vitae, earum officia? </p>
</div>

OBS: The effect using .png normally works only if the image is hosted on some server, even locally. So to test in local environment I suggest that you access the files by localhost using Wamp, Xamp, etc., or put it on the FTP of some server.