Slanted shapes (formas diagonais) com CSS

Aprenda a fazer slanted shapes (formas diagonais ou Razor-Blade shape) com CSS através de uma variedade de técnicas possíveis.

Ir para o artigo

Fazer Slanted shapes (formas diagonais ou Razor-Blade shape) com CSS pode parecer complicado, mas não é. Pelo menos, não atualmente.

No passado, realmente era preciso usar de técnicas das mais variadas (a.k.a. gambetas) para se conseguir slanted shapes no background, como separadores etc., mas, felizmente, muita coisa evoluiu.

Inclusive, muitas coisa boa está sendo feita usando formas inclinadas e afins, como é possível ver nestes exemplos (que são poucos, comparados com o que se pode encontrar pela Web afora):

Exemplos de site usando slanted shapes (formas diagonais) — Quando bem usados, realmente slanted shapes trazem aquele *tchã* ao projeto!

Depois de ver essas imagens, você não pode ficar fora dessa! Acompanhando nosso vídeo introdutório sobre o tema (que você já deve ter visto acima), veja como fazer slanted shapes (formas diagonais ou Razor-Blade shape) com CSS.

Exemplo 1: slanted shape simples

Foi comentado que, atualmente, existem técnicas que permitem que se chegue ao resultado de formas diagonais em desenvolvimento web muito facilmente.

Talvez uma das simples seja usando a propriedade transform de CSS. Supondo que seja um elemento que vá receber conteúdo, basicamente, o que se deve fazer é dar uma inclinada (skew):

<section class="l-section l-section--slanted"></section>

1	<section class="l-section l-section--slanted"></section>

.l-section {
  transform: skewY(-3deg);
}

.l-section {

transform: skewY(-3deg);

}

Entretanto, isso fará com que qualquer conteúdo também fique inclinado. Por prevenir, é preciso garantir que o skew oposto seja feito em um elemento interno (que servirá de wrapper para os demais conteúdos).

<section class="l-section l-section--slanted">
    <div class="l-section__content"></div>
</section>

</section>

.l-section {
  transform: skewY(-3deg);
}

.l-section__content {
  transform: skewY(3deg);
}

.l-section {

transform: skewY(-3deg);

}

.l-section__content {

transform: skewY(3deg);

}

Que vai garantir exatamente o resultado esperado:

Exemplo de slanted shape: uma forma diagonal simples aplicada a um wrapper com conteúdo. — Slanted shape simples

Exemplo 2: hero com formato especial

Para o segundo exemplo, na parte de conteúdo só precisaremos de um wrapper qualquer (claro que, em projetos do mundo real, isso seria recheado de conteúdo):

<section class="l-section l-section--hero"></section>

1	<section class="l-section l-section--hero"></section>

Neste caso, a grande sacada para hero com formas inclinadas é trabalhar com ::before e ::after.

.l-section--hero {
  background: url(../img/hero.jpg) no-repeat center center;

.l-section--hero::before {
  content: '';
  height: 100%;
  left: -50%;
  position: absolute;
  top: 100%;
  transform-origin: right;
  transform: skewY(10deg);
  width: 100%;
}

.l-section--hero::after {
  content: '';
  height: 100%;
  right: -50%;
  position: absolute;
  top: 100%;
  transform-origin: left;
  transform: skewY(-10deg);
  width: 100%;
}

.l-section--hero {

background: url(../img/hero.jpg) no-repeat center center;

.l-section--hero::before {

content: '';

height: 100%;

left: -50%;

position: absolute;

top: 100%;

transform-origin: right;

transform: skewY(10deg);

width: 100%;

}

.l-section--hero::after {

content: '';

height: 100%;

right: -50%;

position: absolute;

top: 100%;

transform-origin: left;

transform: skewY(-10deg);

width: 100%;

}

Perceba que as propriedades de posicionamento (left e right) e transformação (transform e transform-origin) estão “invertidas”, garantindo que os objetos fiquem “espelhados”.

Exemplo de slanted shape: fazendo um exemplo de hero estilizado. — Slanted hero: quase lá.

E aí só falta um pequeno passo: garantir que a cor dos pseudo-elementos seja a mesma que a do background em que ele está (no caso, branco), conferindo um efeito de “máscara” para o hero (no exemplo, uma espécie de seta indicativa estilizada).

.l-section--hero::before,
.l-section--hero::after {
  background-color: #fff;
}

.l-section--hero::before,

.l-section--hero::after {

background-color: #fff;

}

Eis o resultado final:

Exemplo de slanted shape: finalizado o exemplo de slanted hero. — Lembre-se de acertar com a cor de fundo.

Se quiser uma estilosidade a mais, pode usar background-attachment: fixed.

Exemplo 3: componente com divisão diagonal

Para o exemplo final dessa introdução a slanted shapes, que tal um componente informacional com divisão diagonal?

Tomando por base que você sabe como fazer a parte inicial (ou assistiu ao nosso vídeo, que mostra todo o processo) o pulo do gato, neste caso, fica por conta da propriedade clip-path em formato trapezoidal.

clip-path: polygon(9% 0, 100% 0, 100% 100%, 0% 100%);

1	clip-path: polygon(9% 0, 100% 0, 100% 100%, 0% 100%);

Que garantirá o tão esperado resultado de uma divisão diagonal para o componente:

Exemplo de slanted shape: componente informacional com divisória diagonal. Há a foto de uma pessoa muito feia. — Desculpe mostrar uma pessoa tão feia. Não tínhamos outra imagem.

Mas como saber que aqueles valores de polygon produziriam essa forma? O CSS clip-path maker ajuda bastante com essa parte.

É uma ferramenta visual que simplesmente fornece o código necessário para qualquer forma que você queira usar. De nada.

Conclusão sobre slanted shapes com CSS

Como foi visto, aprender a fazer slanted shapes (formas diagonais ou Razor-Blade shape) com CSS não é tão complicado; além disso, existem diversas técnicas para se chegar ao resultado, então fique à vontade para escolher conforme a vontade[/necessidade].

Não deixe de assistir ao nosso vídeo para mais detalhes, que indica também o repositório em que você pode encontrar os códigos de todos esses exemplos.

E você, já teve que usar slanted shapes em algum site? Passa o link pra gente dar uma olhada.