Skip to content

Instantly share code, notes, and snippets.

@arthuralvim
Created November 2, 2013 20:25
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save arthuralvim/7283112 to your computer and use it in GitHub Desktop.
Arrows without images, only CSS. (Cross Browser) Setas sem usar imagem via CSS. (pt-br)
.seta{
width: 0;
height: 0;
}
.seta.cima {
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #aaa;
}
.seta.direita {
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #aaa;
}
.seta.baixo {
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #aaa;
}
.seta.esquerda {
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid #aaa;
}
.seta.seta-especifica{
border:100px solid transparent;
display:block;
}
.seta.seta-especifica.colorido{
border-top-color:#f00;
border-left-color:#ff0;
border-right-color:#0f0;
border-bottom-color:#0ff;
}
.seta.seta-especifica.cima{ border-bottom-color:#000; }
.seta.seta-especifica.direita{ border-left-color:#000; }
.seta.seta-especifica.baixo{ border-top-color:#000; }
.seta.seta-especifica.esquerda{ border-right-color:#000; }
<!-- adding setas.css -->
<link href="caminho/para/setas.css" rel="stylesheet">
<div class="seta cima"> </div>
<div class="seta direita"> </div>
<div class="seta baixo"> </div>
<div class="seta esquerda"> </div>
<div class="seta seta-especifica colorido"></div>
<div class="seta seta-especifica cima"> </div>
<div class="seta seta-especifica direita"> </div>
<div class="seta seta-especifica baixo"> </div>
<div class="seta seta-especifica esquerda"> </div>
<!-- referencias -->
<!-- http://www.rafaelmarques.com.br/blog/como-fazer-triangulos-com-css/ -->
<!-- http://www.tidbits.com.br/desenhando-setas-no-html-sem-usar-imagem-cross-browser -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment