WebCis - Servios de criao sites, marketing digital e sistemas web.

SIGA-NOS
Solicite um oramento

Dicas para Criao de sites

Como criar setas com CSS sem utilizar imagens

Publicidade

Hoje iremos ver como criar setas utilizando apenas algumas linhas de css básico

Veja abaixo o exemplo:

Podemos mudar a forma e o tamanho das setas apenas alterando o tamanho das bordas.

Veja abaixo como ficou o código:

<style type="text/css">.seta-1{ border-left: 30px solid #C00; border-top: 30px solid transparent;  border-bottom: 30px solid transparent; float:left;}.seta-2{ border-right: 30px solid #C0C; border-top: 30px solid transparent;  border-bottom: 30px solid transparent; float:left;}.seta-3{ border-bottom: 40px solid #0C0; border-left: 20px solid transparent;  border-right: 20px solid transparent; float:left;}.seta-4{ border-top: 40px solid #0CC; border-left: 50px solid transparent;  border-right: 50px solid transparent; margin:0 10px; float:left;}</style><div class="seta-1"></div><div class="seta-2"></div><div class="seta-3"></div><div class="seta-4"></div>

Eu utilizei para esses exemplos uma tag "div", mas você pode usar qualquer elemento como "span", "strong", entre outros e até mesmo os pseudo-elementos after e before.

O mais interessante desse metódo é que com alguns outros comandos podemos fazer, algumas setas mais estilizadas

Veja abaixo o código usado nos exemplos acima:

<style type="text/css">.seta-5{ padding:10px 20px; background:#c00; border-radius:50px; float:left; transition:all 0.2 linear; opacity:1}.seta-5 i{ border-left: 10px solid #FFF; border-top: 10px solid transparent;  border-bottom: 10px solid transparent; float:left; margin:0 10px;}.seta-5:hover{opacity:0.7; box-shadow:0 0 4px #600}.seta-6{ padding:15px 20px; background:#069; border-radius:50px; float:left; margin:0 10px; }.seta-6 i{ border-right: 20px solid #fff; border-top: 15px solid transparent;  border-bottom: 15px solid transparent; float:left; transition:all ease-out 0.2s;}.seta-6:hover i{transform: rotate(360deg) scale(1.2);}.seta-7{ padding:15px 20px; border:6px solid #ccc; border-radius:50px; float:left; margin:0 10px; box-shadow: 0 0 4px rgba(0,0,0,0.7); transition:all linear 0.2s; }.seta-7 i{ border-left: 20px solid #ccc; border-top: 15px solid transparent;  border-bottom: 15px solid transparent; float:left; }.seta-7:hover{transform: rotateX(180deg)}</style><div class="seta-5"><i></i></div><div class="seta-6"><i></i></div><div class="seta-7"><i></i></div>
Publicidade
Postado por: Danilo Luna
Arte e Desenvolvimento  

Assine nosso feeds e receba notcias todas semanas

ltimos Clientes

[veja todos]