Tenho essa seguinte flecha em um layout, mas não quero fazer uma imagem e sim só com CSS. Como faço? tenho que usar bordas?
4 Respostas
Podes fazer com CSS com duas formas, um retângulo e um triângulo. E assim podes por o tamanho que quiseres da seta.
#triangle-right
{
width: 0;
height: 0;
border-top: 50px solid transparent; /* tamanho do topo ao meio */
border-left: 75px solid red; /* comprimeto da seta */
border-bottom: 50px solid transparent; /* tamanho do meio a baixo */
margin-left:100px; /* comprimento da cauda */
}
#rectangle
{
width: 100px; /* comprimento da cauda */
height: 50px; /* largura da cauda */
background: red;
position: absolute;
margin-top:25px; /* metade da largura para ficar centrado*/
}
<div>
<div id="rectangle"></div>
<div id="triangle-right"></div>
</div>
-
2@FelipeStoker, se queres exactamente a seta como tens, esta é a melhor solução. A do Bacco porém, não é afetada por css's caso queiras aplicar, muito por definir uma imagem de fundo. +1 Commented 24/11/2014 às 11:08
-
2
-
1Vocês são nota 10! Era exatamente o que eu queria! Commented 24/11/2014 às 16:21
-
@JorgeB. tem como eu colocar uma borda? vi que se eu colocar, ele deixa quadrado. Commented 25/11/2014 às 11:08
-
Podes usar um HTML unicode (decimal ou hexadecimal) para fazer a seta, e poder adaptar o tamanho da fonte, cores, etc etc, com o css:
<p style="font-size:40px;">→<p>
<p style="font-size:20px; color:red;">→<p>
Exemplo LINK
Para mais exemplos, podes ver através do w3schools
-
No meu browser (Chrome/OSX) os caracteres não são exibidos. Mas quando eu copiei e colei num editor de texto, apareceram. ??? Commented 24/11/2014 às 19:49
-
@bfavaretto, talvez seja problema de plataforma, não sei. Em ambiente windows funciona nos 3 browsers, acho muito estranho que isso te aconteça Commented 25/11/2014 às 9:20
Sem imagem, sem alteração no HTML:
Usando bordas dá pra improvisar apenas com CSS, sem precisar de imagem nenhuma:
.flecha::after {
display:block;
position:absolute;
content:'';
left:-26px;
top:-3px;
width: 20px;
height: 6px;
background:black;
}
.flecha {
position:relative;
margin-left:20px;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 6px solid black;
}
<div class="flecha"></div>
Edit: a lógica é parecida com a da resposta do @Jorge B., mas não precisa de alterações no HTML, pelo uso dos pseudo-elementos em vez de duas DIVs.
Alternativa: imagem embutida no CSS
Se o problema de ter uma imagem é o recurso externo, em vez de linkar a imagem, dá pra usar um data URI:
.flecha {
width: 26px;
height: 12px;
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAMCAYAAAB8xa1IAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MzU4Qjk5RDY3M0M3MTFFNEE1NTBBQjM3QUM2QUY2RTAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MzU4Qjk5RDc3M0M3MTFFNEE1NTBBQjM3QUM2QUY2RTAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozNThCOTlENDczQzcxMUU0QTU1MEFCMzdBQzZBRjZFMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozNThCOTlENTczQzcxMUU0QTU1MEFCMzdBQzZBRjZFMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pjn3yM0AAAElSURBVHjatFQ7boNAEB1g+SMhkGUJqtQpkjrXyB1cWEi+gbsU6aMUlnwb+wT2BXwIpCBYlrxZeR0rpYGRRsuMYN6b4e1YURSRUoosy6JHzfM8/f0wDBw++b5/MfU4xy5oAmuaRpNl67ruE+S9LMve+7434OS4rquDMR3Ztk2O4+gTtZ7btl3jlHEcH5iA6WjBgHD1KJBhzWQB5nMndV1/IA7SNN0CWLP54XeRnMy5nvEkSbZlWRLPC3Dk0owWhuHOBgNJMxtGu6T/rU7tUOB3URQkgiB4hTIEANVY5kwa8l5JKSuOAbKHzCvkSEAMJ6OYiexyBfnK83zDIFre5uaO/Ae3C4tu3jClIzrZ4PlP+mNWkCkihLhfQS9Q2RmTGu5X0K8AAwD5DrixhRb2XAAAAABJRU5ErkJggg==);
}
<div class="flecha"></div>
-
-
é a imagem que usas no fundo, neste caso, da tua div flecha.– Jorge B.Commented 24/11/2014 às 11:08
Outra alternativa para isso, mesmo que não seja CSS puro é utilizar ícones webfonts como o http://typicons.com/ Eles são completamente personalizáveis em CSS (cor, tamanho, opacidade, etc.).