# Slanted shapes (formas diagonais) com CSS
> Slanted Shapes: crie formas diagonais em CSS. Técnicas criativas para backgrounds, seções e layouts com ângulos inclinados impressionantes. Domine!
URL: https://dpw.dev/css/slanted-shapes-formas-diagonais/
Publicado em: 2020-01-27
Categoria: css
Tags: interface, layout
Autor: Tárcio Zemel
[Vídeo no YouTube](https://www.youtube.com/watch?v=5HTEGSfEn_8)
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):
- 
- 
- 
- 
- 
- 
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_):
```html
```
```scss
.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).
```html
```
```scss
.l-section {
transform: skewY(-3deg);
}
.l-section__content {
transform: skewY(3deg);
}
```
Que vai garantir exatamente o resultado esperado:
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):
```html
```
Neste caso, a grande sacada para hero com formas inclinadas é trabalhar com `::before` e `::after`.
```scss
.l-section--hero {
background: url(../img/hero.webp) 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".
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;
}
```
Eis o resultado final:
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%);
```
Que garantirá o tão esperado resultado de uma divisão diagonal para o componente:
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](https://bennettfeely.com/clippy/) 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.
---
Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml