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.

 
 
 
 
    
    
 
 
	New Music 
	
 
		
 Hello, Everyone! 
 
		
 
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		
 
	
 
 

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.

body {
	background: #e3e3e3;
	font-family: sans-serif;
	width: 400px;
	margin: 100px auto;
}

etapa 3

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

a {
	padding: 10px;
	text-decoration: none;
	color: white;
	font-weight: bold;
	display: block;
	
	border-right: 30px solid red;
	border-bottom: 30px solid #4c4c4c; 
}

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.

a {
	padding: 10px;
	text-decoration: none;
	color: white;
	font-weight: bold;
	display: block;
	
	border-right: 30px solid red;
	border-bottom: 30px solid #4c4c4c;

   height: 0;
}

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

a {
	padding: 10px;
	text-decoration: none;
	color: white;
	font-weight: bold;
	display: block;
	
	border-right: 30px solid red;
	border-bottom: 30px solid #4c4c4c; 
	
	height: 0;
	line-height: 50px;
}

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.

a {
	padding: 10px;
	text-decoration: none;
	color: white;
	font-weight: bold;
	display: block;
	
	border-right: 30px solid transparent;
	border-bottom: 30px solid #4c4c4c; 
	
	height: 0;
	line-height: 50px;
}

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.

a {
	padding: 10px;
	text-decoration: none;
	color: white;
	font-weight: bold;
	display: inline-block;
	
	border-right: 30px solid transparent;
	border-bottom: 30px solid #4c4c4c; 
	
	height: 0;
	line-height: 50px;
}

Muito melhor!

Etapa 6

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

div {
	 border: 1px solid #4c4c4c;	
	 border-top: 3px solid #4c4c4c;	   	 
	 padding: 20px;
}

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…

@media screen and (-webkit-animation) {
	a {
		margin-bottom: -4px;
	}
}

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!