GRUPOS DE DISCUSSÃO PROFISSIONAL
WINDEV
,
WEBDEV
e
WINDEV Mobile
Inicio
|
Mensagens recentes
|
Conecte-se...
|
Disconnect
|
Português
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
Conecte-se…
SandraLewisFrin
#1
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>
Denunciar
0
0
CCordes
#2
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
Denunciar
0
0
→ Voltar para WEBDEV 2024
WINDEV 2024
WEBDEV 2024
WINDEV Mobile 2024
WINDEV (versões anteriores)
Français
English
Español
Portuguesa
Fermer cette fenêtre
Tipo de Pesquisa
Apenas tópicos
Todas as mensagens
Período de pesquisa
Qualquer momento
Última hora
Últimas 24 horas
Semana passada
Mês passado
Ano passado
Cancelar
Pré-visualização da sua mensagem
Adicionar imagem
Importar uma imagem de uma URL
Enviar uma imagem a partir do seu disco
Deixe um ficheiro ou clique em "Procurar ..."
ou
Cancelar
0%
WLanguage
SQL
XML, HTML
JAVA, Javascript
Texto