Crie layouts diagonais como se fosse 2024

Layouts com seções diagonais são bastante populares há vários anos. Não é a novidade , e você provavelmente não a encontrará nos artigos intitulados “Tendências de design para 2024”. Mas acho que está aqui para ficar. É uma ferramenta que os designers podem usar para trazer alguma dinâmica a todas as caixas retangulares com ângulos de 90 graus.

Por isso, é essencial que os designers de front-end saibam como implementar esses designs com CSS. Então, se você quiser aprender como fazer isso, veio ao lugar certo.

Como tantas vezes, não há nada como um Santo Graal. Existem várias maneiras de criar esse tipo de layout. E com muitos, quero dizer três. Pelo menos três que eu conheço:

1. Use um SVG na forma de um triângulo. Essa técnica é bem descrita por Erik Kennedy no CSS-Tricks .
2. Oculte parte da sua seção usando CSS-Clip-Path. Leia Recipientes diagonais em CSS por Sebastiano Guerriero.
3. Usando transformações CSS.

Você já deve ter adivinhado qual das opções fornecidas vou usar. Certo, o terceiro 🙂

Então vamos começar

I. Marcação básica

Primeiro, configuraremos nossa marcação HTML. Consiste basicamente em dois contêineres.

<div class="diagonal-box">
	<div class="content"> ... </div>
</div>

A div externa é a nossa seção de largura total, enquanto a div interna mantém o conteúdo real. Normalmente, você terá uma largura máxima para a div interna e fornecerá uma margem horizontal automática para centralizá-la. Por enquanto, o contêiner externo não recebe nada além de um belo gradiente como imagem de fundo.

.diagonal-box {
	background-image: linear-gradient(45deg, #6303B1, #ff0099);
} 
.content { 	
	max-width: 50em;
    margin: 0 auto; 
}

II Faça a transformação

A primeira idéia para criar as diagonais pode ser girar todo o contêiner. O problema aqui é que, depois de girar a caixa de 100% de largura, é necessário aumentar a largura acima de 100% para que ela ainda cubra toda a janela de exibição. A quantidade de quanto você precisa aumentar a largura aumenta com a altura da seção.

Então, em vez de girá-lo, usaremos a transformação de inclinação menos conhecida. Mais precisamente, usaremos o SkewY para inclinar a seção ao longo do eixo Y.

.diagonal-box {
	background-image: linear-gradient(45deg, #6303B1, #ff0099);
	transform: skewY(-11deg);
}

III Transformação interna e externa

Você deve ter notado que agora toda a seção está transformada, e com ela também a divisão de conteúdo que nela vive. Embora esse efeito possa ser bastante agradável, às vezes você não deseja que o conteúdo herde a transformação fornecida. Para redefinir tudo de volta ao normal, você deve reverter a transição:

.diagonal-box {
	background-image: linear-gradient(45deg, #654ea3, #eaafc8);
	transform: skewY(-11deg);
}

.content {
	max-width: 50em;
	margin: 0 auto;
	transform: skewY(11deg);
}

IV Use um pseudoelemento

Se você quiser fazer outras transições no elemento interno (ou seja, alguma animação de desvanecimento), sempre pense em adicionar a re-transformação primeiro. Outras transformações serão empilhadas em cima da primeira. Isso pode ser um pouco provocador. Felizmente, existe uma solução para o problema: em vez de transformar todo o contêiner, você pode adicionar um pseudo-elemento com as mesmas dimensões e, em seguida, inclinar isso. Nosso código ficará assim:

 .diagonal-box {
 	position: releative;
}

.diagonal-box:before {
	position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-image: linear-gradient(45deg, #654ea3, #eaafc8); 	
    transform: skewY(-11deg);
}

.content {
	max-width: 50em;
    margin: 0 auto;
    position: relative;
}

Agora toda a mágica acontece no elemento anterior. Como é posicionado usando posição absoluta, você precisa adicionar dois valores relativos à posição. O primeiro no contêiner externo, para que todos os seus filhos possam ser posicionados em relação às suas bordas. E o outro no contêiner interno, para que ele fique em cima do elemento anterior.

V. Coloque seu conteúdo sem medo.

Você deve ter notado que agora o conteúdo não está totalmente fechado pelo contêiner ao redor. Se você quiser colocar algo no contêiner sem ter medo de cruzar as linhas diagonais, precisará de um pouco de preenchimento. Uma maneira de encontrar a quantidade certa de preenchimento que funciona para você é usar algum método de tentativa e erro. Ou você se aprofunda no seu conhecimento de trigonometria e calcula a altura exata:

Quando você olha para a ilustração, pode ver que já sabemos a largura de a , pois é a largura do contêiner. Então α é o mesmo ângulo que usamos para inclinar nosso elemento (11deg). E sabemos que tudo forma um triângulo retângulo. Com essas informações, podemos calcular x usando esta fórmula:

x = tan (α) * a / 2

Infelizmente, não podemos usar isso com cálculos de CSS, pois a função tangente não é suportada. Não é um problema enorme, no entanto. Na maioria das vezes, o ângulo permanece o mesmo, para que você possa calculá-lo uma vez e depois armazená-lo. Ainda assim, há um ponto onde você tem que ter cuidado: A maioria de vocês vai usar graus de unidade quando você faz a transformação: skewY(-11deg). Se você fizer isso, também precisará usar Deg e não Rad ao calcular a tangente. A calculadora padrão do Google usa Rad como padrão.

VI Diversão com propriedades personalizadas

Os números que você obtém do cálculo de tan não parecem tão bons. Neste exemplo, tan (11 °) / 2 resulta em 0,09719. Felizmente, podemos usar as Propriedades personalizadas e facilitar a leitura do nosso código:

:root {
	--magic-number: 0.09719; /* tan(11°)/2 */
	--content-width: 100vw;
	--skew-padding: calc(var(--content-width) * var(--magic-number));
}

@media screen and (min-width: 42em) {
	:root {
		--content-width: 42em;
	}
}

Vamos ver o que está acontecendo aqui. Primeiro, calculamos nosso número mágico e o armazenamos em uma variável. Depois, também armazenamos a largura do conteúdo. Finalmente, calculamos o preenchimento necessário multiplicando as duas variáveis ​​anteriores e também salvamos o valor em uma variável. Porque CSS-variáveis são live-atualizado, podemos mudar o --content-width, eo --skew-paddingvai ajustar em conformidade.

Agora que você tem a distância armazenada em uma variável, pode usá-la em qualquer lugar do seu projeto. Por exemplo, você pode organizar algumas caixas para que elas fiquem alinhadas com as diagonais. Dependendo do número de caixas, você precisa usar alguns cálculos. Gostar:
transform: translateY(calc(var(--skew-padding) / 2));

Divirta-se brincando

Aqui você pode ver um exemplo de trabalho. Os valores para o número mágico são atualizados usando JavaScript, o resto é CSS puro.

---