Setas utilizando apenas CSS – css css3
Pergunta:
Gostaria de saber, se é possível, efetuar a seguinte seta, utilizando apenas CSS:
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.
Autor da pergunta helderburato
haykou
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>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>Related Posts:
Qual a diferença entre AppCompatActivity e Activity? – android android-activity
Pergunta:
Qual a diferença da AppCompatActivity para Activity ?
A partir de qual versão a AppCompatActivity foi adicionada ao Android?
Autor da pergunta Luhhh
A diferença reside ...
Como abreviar palavras em PHP? – php string
Pergunta:
Possuo informações comuns como nome de pessoas e endereços, e preciso que elas contenham no máximo 30 caracteres sem cortar palavras.
Exemplo:
'Avenida Natalino João Brescansin' ...
Qual é a finalidade de um parêntese vazio numa declaração Lambda? – c# expressões-lambda característica-linguagem
Pergunta:
Criei um exemplo de uma declaração Lambda sem argumentos, entretanto, estou com duvidas referente a omissão do parêntese vazio () na declaração.
Veja o exemplo:
class ...
Boas práticas para URI em API RESTful – api rest restful
Pergunta:
Estou com dúvida em relação às URIs de alguns recursos da api que estou desenvolvendo. Tenho os recursos projetos e atividades com relação 1-N, ...
Dúvidas sobre a integração do MySQL com Java – java mysql netbeans
Pergunta:
Estou criando um sistema no NetBeans, utilizando a linguagem Java e o banco de dados MySQL. Escrevi o seguinte código para realizar a conexão ...
Qual é a finalidade da pasta Model do framework Inphinit? – php inphinit
Pergunta:
No Inphinit micro-framework existe a pasta Model que fica dentro da pasta application, e nela é onde ficam as classes, mas eu estou muito ...
Uso do ‘@’ em variáveis – javascript typescript coffeescript
Pergunta:
Vejo em algumas linguagens que compilam para javascript, como TypeScript e CoffeeScript, o uso do @ em variáveis, como também, casos em que o ...
Qual tamanho máximo um arquivo JSON pode ter? – json arquivo
Pergunta:
Vou dar um exemplo para conseguir explicar minha duvida:
Preciso recuperar informação de imagens vindas de uma API, esse banco de imagens me retorna JSON's ...
O que é Teste de Regressão? – terminologia engenharia-de-software testes
Pergunta:
Na matéria de Teste de Software o professor abordou um termo chamado Teste de Regressão, isto dentro da disciplina de teste de software. Sendo ...
O que é um construtor da linguagem? – php característica-linguagem
Pergunta:
Em PHP, já li e ouvi várias vezes a respeito dos Construtores da Linguagem. Os casos que sempre ouvi falar deles foi em casos ...
Função intrínseca para converter numérico para string – cobol
Pergunta:
Estou a tentar saber se existe alguma função intrínseca do COBOL para converter um data numérico para string sem precisar usar a cláusula REDEFINES:
( ...
Porque usar implements? – java android
Pergunta:
Qual a diferença entre usar
btn.setOnClickListener(new OnClickListener() {
e
public class MainActivity extends Activity implements OnClickListener{
Estive fazendo um curso de Android e meu professor falou que ...
O que é XHTML e quando deve ser usado? – html xml xhtml
Pergunta:
O que eu sei é que o XHTML precisa ser XML válido. Isso implica, por exemplo, que todas as tags precisam ser fechadas. Por ...
Uma placa aceleradora de vídeo pode melhorar o desempenho não-gráfico? [fechada] – desempenho
Pergunta:
Para desenvolver em Ruby on Rails, eu utilizo aqui uma máquina virtual do VirtualBox com Ubuntu Server 14.04 sem interface gráfica instalada.
Recentemente descobri uma ...
Concat() VS Union() – c# .net
Pergunta:
Qual a diferença entre Concat() e Union() ?
Quando usar Concat() e quando usar Union() ?
Somente pode ser usado em list ?
...