PC SOFT

GRUPOS DE DISCUSSÃO PROFISSIONAL
WINDEVWEBDEV e WINDEV Mobile

Inicio → WEBDEV 2024 → Wrap large text in arrow shape div block
Wrap large text in arrow shape div block
Iniciado por SandraLewisFrin, mar., 11 2022 8:31 AM - 1 resposta
Membro registado
6 mensagems
Publicado em março, 11 2022 - 8:31 AM
How can I wrap large text in arrow and also change arrow size to wrap large text with changing screen size? Please refer to code below ,it creates arrow but if I increase text then arrow becomes long but I want a shorter one which wraps text in two lines and changes shape based on screen size.

.blockHead:after {
color: #4D81BF;
border-left: 20px solid;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
display: inline-block;
content: '';
position: absolute;
right: -20px;
top: 0;
}
.blockHead {
background-color: #4D81BF;
/*width: 150px; */
height: 40px;
line-height: 40px;
display: inline-block;
position: relative;
}
.blocktext {
color: white;
font-weight: bold;
padding-left: 10px;
font-family: Arial;
font-size: 11;
}
<div class="blockHead"><span class="blocktext">ABC Team</span>
</div>
Membro registado
68 mensagems
Publicado em março, 15 2022 - 3:54 PM
Hi,
First - I like the arrow from css.
Try this for the blockhead
background-color: #4D81BF;
width: 200px;
height: fit-content;
line-height: 1.5em;
display: inline-block;
position: relative;

Let me know if you like it.

Chris C

--
Sometimes waiting is the best way forward...
Mensagem modificada, março, 15 2022 - 3:55 PM