WebCis - Serviços de criação sites, marketing digital e sistemas web.

SIGA-NOS
Solicite um orçamento

Dicas para Criação e 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 notícias todas semanas

Últimos Clientes

[veja todos]