12

Gostaria de saber, se é possível, efetuar a seguinte seta, utilizando apenas CSS:

inserir a descrição da imagem aqui

Costumo efetuar outros tipos de setas, utilizando CSS, porém sempre que me debato com casos igual a este, onde a seta possui um fundo transparente, acabo utilizando imagens.

6
  • 2
    Pode usar o caracter > com ::after já experimentou?
    – Sergio
    12/11/2014 às 19:02
  • Complementando o Sergio acima: elemento::after { content: ">";}
    – dsantoro
    12/11/2014 às 19:05
  • Normalmente usam os icones como se fossem fontes. 12/11/2014 às 19:06
  • Havia feito dessa forma, porém, a fonte fica muito diferente, e os designers aqui da empresa piram kkk 12/11/2014 às 19:06
  • Usa ela como background entao. elemento::after { content:""; width: 15px; height: 15px; background: caminhodaimagem no-repeat center;} Sabendo que a imagem deva ser salva com fundo transparente.
    – dsantoro
    12/11/2014 às 19:09

2 Respostas 2

18

Usando CSS eu faria assim, estilizando do modo que quiser.

.seta {
  position: absolute;
  padding: 3rem; /* Arrow size */
          box-shadow: 1px -1px 0 1px red inset;
  -webkit-box-shadow: 2px -2px red inset;
  border: solid transparent;
  border-width: 0 0 2rem 2rem;
  transition: 0.2s;
}

.seta-direita { transform:rotate(225deg) }
<div class="seta seta-direita"></div>

2
  • 1
    Holy shit! :o 12/11/2014 às 19:27
  • +1 - ótima sacada. =)
    – OnoSendai
    12/11/2014 às 19:30
6

Tente isso:

html, body {font-size: 14px}
button {
    background-color: transparent;
    border: 0.1em solid #000;
    outline: none;
    padding: 0.75em 1em;
    text-transform: uppercase;
}
button:hover {cursor: pointer}
button:after {
    border-right: 0.1em solid #000;
    border-bottom: 0.1em solid #000;
    content: "";
    display: inline-block;
    height: 1em;
    vertical-align: bottom;
    width: 1em;

    -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
}
<button type="button" role="button"> Ver mais projetos </button>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .