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
<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
Gostou dessa dica?
2 Voto(s)
Arte e Desenvolvimento
