Good morning, I have a "square" image but in pentagon format, I need to write on the edges of it:
Picture:
Ineedtowriteinpentagonformattoo,asintheexample:
Another requirement is that the text will probably change, but it should grow out of the image, that is, 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 anyone who can help, thank you!
Follow a template. Notice that the right text is left-aligned, and the left-hand text is right-aligned, so they grow out of the image. The center text will always be centered, but as your image is cropped wrong it gets a bit misaligned.
The parent in the case should have position:relative and the children absolute and the image used as background to leave 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>I'm not sure if this is the case, but I do not think it's a good idea.
CSS 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"><spanid="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>