Introdução

Até alguns anos atrás, se você quisesse formas de fundo ou seções de um site que fossem algo além de retângulos, provavelmente precisaria de um designer para fornecer uma imagem PNG ou JPEG estática que seria adicionada conforme necessário, mas o CSS tem percorremos um longo caminho desde então, meus amigos.

Quando eu estava trabalhando em uma atualização de site que dividia o conteúdo da página em diferentes seções de fundo coloridas, alternando entre branco puro e cinza suave, na maquete do design eu incluí uma seção cuja borda inferior inclinada para cima e para à direita, em vez de atravessar a página em um ângulo perfeito de 90 graus, como faz um elemento de bloco típico.

Agora eu poderia ter pedido ao designer para criar uma imagem de fundo para fazer isso para mim, mas em vez disso, queria ver se conseguiria fazer isso sozinho com o poder do CSS. E eis que eu poderia, com clip-path CSS.

Formas e recursos visuais interessantes no DOM não são mais domínio exclusivo dos designers, com ferramentas como CSS clip-path, os desenvolvedores têm o poder de remodelar elementos e vou mostrar como.

Caminho de clipe CSS

Se você estiver menos familiarizado com a propriedade CSS clip-path, como eu, ela cria uma região de recorte que define quais partes de um elemento devem ser mostradas. As partes que estão dentro da região são mostradas, enquanto as que estão fora ficam ocultas.

Uma demonstração dos documentos do clip-path do MDN. Diferentes opções de clip-path fornecem diferentes visualizações do balão de ar quente e do texto.

A propriedade clip-path pode aceitar uma grande variedade de valores:

• , que aceita valores como url para um elemento SVG com caminho de recorte definido.
• , que aceita valores como margin-box e border-box.
• , que aceita valores como círculo() e rect().
• valores globais, que aceita valores como herdar e reverter.

Os valores e podem até ser combinados em um clip-path.

/* this CSS combines two different clip path properties */
clip-path: padding-box circle(50px at 0 100px);

Esta postagem não entra em muitos detalhes sobre todas as propriedades que o clip-path pode aceitar e como elas podem ser combinadas para criar formas bastante complexas. Se você quiser mais informações e exemplos de clip=path em ação, recomendo começar com a documentação do Mozilla.

Uma das propriedades que o clip-path aceita é polygon(), e essa acabou sendo a solução que eu precisava para minha seção de fundo inclinada.

O polígono que eu precisava recriar com CSS

O plano de fundo poligonal cinza que eu precisava criar com CSS.

A imagem acima é uma captura de tela da seção de fundo cinza que eu precisava recriar com a propriedade polygon() do clip-path CSS. E a primeira coisa que precisei fazer foi criar alguns elementos HTML para aplicar o CSS.

polygon() clip-path vs rect() clip-path

Você deve estar se perguntando por que escolhi usar a propriedade polygon() em vez da propriedade rect() com clip-path. Embora os dois sejam semelhantes, polygon() pode criar formas poligonais mais complexas e oferece maior versatilidade para projetos avançados, aceitando pares de coordenadas para definir cada vértice do polígono, enquanto rect() só pode lidar com formas retangulares.

Configure o HTML e CSS

O site em que eu estava trabalhando contava com o gerador de sites estáticos Hugo, um framework baseado em Go. Hugo usa modelos para renderizar o HTML do site, portanto, o código de exemplo abaixo deve parecer relativamente familiar para você se você conhece HTML.

Uma observação sobre modelos:

Se você já usou componentes JSX, Node.js com Pug ou Handlebars, ou Jekyll - os modelos de Hugo são semelhantes: elementos HTML com variáveis ​​e funções Go espalhadas com {{ }} para renderizar as informações corretas onde quer que os modelos são injetados.

Aqui está o código para o que eu apelidei de "seção do quebra-cabeça" da página devido à peça do quebra-cabeça no primeiro plano desta seção. Para fins e clareza deste artigo, substituí as variáveis ​​Go injetadas no modelo pelo HTML gerado.

único.html

  

    

    

      

        

          

              

                Lorem ipsum dolor
              
              

                Sit amet, consectetur adipiscing 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. Ipsum dolor sit amet consectetur adipiscing elit pellentesque.
              
              

                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. Consectetur adipiscing elit pellentesque habitant morbi tristique senectus et.
              
          
          

            
          
        
      
    

     
  

Esta seção do código é relativamente compacta, mas merece discussão. Além dos elementos HTML, existem algumas classes CSS que vêm da biblioteca Bootstrap, uma das estruturas CSS originais de código aberto para designs web responsivos.

Entre as classes personalizadas como about-body, que usei para adicionar estilos personalizados, existem classes como container, row, col-12 ou col-md-6, mb-5 e mb-3.

Todas as últimas classes são classes Bootstrap, que servem para fazer com que os elementos de texto e imagem na tela compartilhem a largura da página quando a janela de visualização estiver acima de uma determinada largura (col-md-6), ou aplicar uma margem inferior de uma certa quantia para as tags

(mb-3 ou mb-5).

As classes Bootstrap não vêm ao caso neste post, porém, a classe em que focar é a seção de quebra-cabeça que envolve todo o texto e a imagem da peça do quebra-cabeça.

Esta classe de seção de quebra-cabeça é onde adicionaremos a propriedade clip-path para exibir o fundo cinza claro atrás do texto e da imagem com o design ligeiramente inclinado para cima e para a direita.

Adicione o clip-path CSS para moldar a seção do quebra-cabeça

Como eu não tinha certeza de como estilizar um

.about-body {
  // this white sets the white background color for the whole webpage
  background-color: white; 

  .puzzle-section {
    // clip-path code copied from the clip-path maker website
    clip-path: polygon(0 0, 100% 0%, 100% 75%, 0% 100%);
    background-color: light-grey;
    padding: 2rem 0 10rem 0;
  }
}