CSS/HTML Writing around an image

Question

Good morning, I have a "square" image, but in the format of Paul, I need to write on the edges of it:

Imagery:

I need to write in Pentagono format too, as in the example:

Another requirement is that, probably the text will be changed, but it should grow out of the image, ie never overlap it..

Someone indicates some plugin that facilitates, or even in pure CSS, the examples I think are only for external text, but complete and not with phrases.

to those who can help, I thank!

Answer 1

Follow a model. Note that the text on the right is left-aligned, and the texts on the left are right-aligned, so they grow out of the image. The center text will always be centered, but as your image is cut wrong it gets a little misaligned.

The Father in the case must have position:relative and their children absolute and the image used as background to make the code cleaner only.

See the result.

  html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.wrap {
  position: relative;
  height: 240px;
  background-image: url(https://i.stack.imgur.com/4449Y.png);
  background-position: center;
  background-repeat: no-repeat;
}
.wrap > span {
  position: absolute;
  font-size: 2rem;
  font-weight: bold;
}
.wrap > span:nth-child(1) {
  color: darkred;
  text-align: left;
  margin-left: 60px;
  top: 2rem;
  left: 50%;
} 
.wrap > span:nth-child(2) {
  color: yellow;
  text-align: left;
  margin-left: 80px;
  top: 8rem;
  left: 50%;
}
.wrap > span:nth-child(3){
  color: orange;
  text-align: center;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.wrap > span:nth-child(4){
  color: orangered;
  margin-right: 120px;
  top: 8rem;
  right: 50%;
  text-align: right;
}

.wrap > span:nth-child(5) {
  color: tomato;
  margin-right: 100px;
  top: 2rem;
  right: 50%;
  text-align: right;
}

  <div class="wrap">
    <span>item 1</span>
    <span>item 2</span>
    <span>item 3</span>
    <span>item 4</span>
    <span>item 5</span>
  </div>

Answer 2

Face the example of Hugo already meets you, I made a simpler example, as you said you do not understand CSS, be with only one example with more advanced selectors as in his example, I think it can confuse you a little.

#conteudo {
  position: relative;
  font-weight: bolder;
}
img {
  position: absolute;
  left: 35%;
  top: 10%;
}
#texto1{
  position: absolute;
  margin-top: 5%;
  left: 22%;
  color: red;
}
#texto2{
  position: absolute;
  margin-top: 5%;
  right: 11%;
  color: #C0392B;
}
#texto3{
  position: absolute;
  margin-top: 19%;
  left: 7%;
  color: #DC7633;
}
#texto4{
  position: absolute;
  margin-top: 19%;
  right: 19%;
  color: #F4D03F;
}
#texto5{
  position: absolute;
  margin-top: 31%;
  left: 47%;
  color: #F5B041;
}

<div id="conteudo">
  <img src="https://i.stack.imgur.com/4449Y.png">
  <span id="texto1">Prevenção Social</span>
  <span id="texto2">Policiamento e Justiça</span>
  <span id="texto3">Fiscalização administrativa</span>
  <span id="texto4">Urbanismo</span>
  <span id="texto5">Tecnologia</span>
</div>