PC SOFT

FORUMS PROFESSIONNELS
WINDEV, WEBDEV et WINDEV Mobile

Accueil  |  Messages récents  | Connexion  |   | Français  FR
Accueil → WEBDEV 2024 → Wrap large text in arrow shape div block
Wrap large text in arrow shape div block
Débuté par SandraLewisFrin, 11 mar. 2022 08:31 - 1 réponse
#1
Membre enregistré
6 messages
Posté le 11 mars 2022 - 08:31
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>
#2
Membre enregistré
68 messages
Posté le 15 mars 2022 - 15:54
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...
Message modifié, 15 mars 2022 - 15:55
→ Revenir à WEBDEV 2024