Como criar linhas diagonais com CSS

Há alguns dias, recebi meu convite para o Google Music. Enquanto navegava no aplicativo, notei um pequeno, mas interessante truque que eles usam para criar abas e bordas diagonais com CSS simples. Eu vou te mostrar como fazer o mesmo em seus projetos hoje!


Prefere um tutorial em vídeo?


Etapa 1: a marcação

Começamos com uma marcação simples.

Vamos manter esta demonstração o mais simples possível.


Passo 2

Em seguida, apenas para o layout, vamos aplicar uma cor de fundo e um pouco de espaçamento ao body elemento.


etapa 3

Agora, vamos estilizar um pouco a marca âncora — aplicar uma nova cor, torná-la em negrito, adicionar algumas bordas, etc.

Observe como, quando você define grandes larguras de borda, no ponto em que as duas se cruzam, cria uma linha diagonal? Gostaria de saber se podemos usar essa interseção como uma borda de tabulação? Vamos tentar reduzir o height para zero.

Chegando perto! Talvez se agora ajustarmos a altura da linha da marca âncora, possamos fazer com que o texto caiba nessa caixa!


Passo 4

Estamos chegando lá! Mas, certamente, não precisamos daquela borda vermelha feia à direita. Existe uma maneira de especificar que ele deve receber o bodya cor de fundo sem reafirmar o valor hexadecimal? Sim! Nós usamos o transparent palavra-chave para este fim.


Etapa 5

A questão óbvia, neste momento, é que parece um pouco estranho, quando o plano de fundo se estende por toda a largura do contêiner. O instinto natural pode ser atualizar o display para inline. No entanto, como mostra a imagem abaixo, isso não funcionará.

Precisamos que o elemento retenha sua block-como a natureza para que ela honre o 0 altura. A resposta para esse dilema é usar display: inline-block;ou para float a marca âncora e, em seguida, clear os elementos que a seguem. Usaremos o primeiro.

Muito melhor!


Etapa 6

Por último, vamos estilizar o div abaixo um pouco, e estaremos quase terminando!

Ah. Nós temos um problema. Parece que o Firefox e o Webkit não concordam exatamente sobre como renderizar elementos com altura zero e exibições de inline-block.

Em uma nota casual, este me deixou um pouco perplexo. Sem recorrer a hacks, não consegui que o Firefox e o Chrome renderizassem o layout exatamente. Se você encontrar uma maneira, deixe-me saber nos comentários! Atualização – consulte os comentários para uma solução alternativa.


Etapa 7

Existem maneiras de direcionar navegadores Webkit com CSS, mas é importante observar que truques como esse devem ser usados ​​apenas em situações de último recurso. Em outras palavras, não tente isso em casa, crianças (a menos que você precise). Na nossa situação, parece que seria mais inteligente usar floats para realizar esse layout. No entanto, vamos ser perigosos e experimentar algumas técnicas alternativas.

Muitos não estão cientes de que as consultas de mídia podem ser usadas para direcionar navegadores Webkit. Veja o que acontece quando usamos uma propriedade específica do webkit como condição para a consulta de mídia…

Tá bom! Funciona. Lembre-se, porém – só use este truque se você não tiver outra opção!


Produto final

É uma técnica bastante simples, mas, no entanto, uma que todos devemos ter em nossos cintos de ferramentas. Você já usou algum truque legal como esse em seus projetos? Deixe-me saber nos comentários!

Deixe um comentário

O seu endereço de e-mail não será publicado.