11 5563-9074
11 5563-907411 99550-0747
11 99550-0747
Orçamento

Como criar setas com CSS sem utilizar imagens

CSS - 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
Autor: Danilo Luna
Arte e Desenvolvimento