Como criar efeitos incríveis com formas CSS

Jan 30, 2026

Como

Os desenvolvedores de frontend tendem a pensar em retângulos; retângulos dentro de retângulos dentro de retângulos dentro de retângulos. Podemos empregar truques com fronteiras para fazer círculos ou triângulos, mas realmente eles ainda são apenas caixas retangulares disfarçadas. Bem, isso está prestes a mudar com Css. Formas, A. W3C. Recomendação candidata que mudará a maneira como você pensa.

Oferta de Natal: Economize até 47% em uma assinatura da revista NET

As formas de CSS permitem criar formas geométricas usando funções de forma: círculo (), elipses (), inset () e polígono () e aplicá-los a elementos ou efeitos, como recorte e filtros. Além disso, as formas podem afetar o fluxo do conteúdo, permitindo que você envolva o texto ordenadamente em torno de recursos como avatares circulares.

Talvez a função de forma mais poderosa seja polígono (), pois permite criar formas arbitrárias complexas usando pontos ilimitados definidos usando pares coordenados. Se você usou Svg. , isso será familiar para você.

Neste tutorial, estaremos usando polígonos com a propriedade Clip-Path para cortar uma forma geométrica do nosso texto para que apenas a área fechada dentro do polígono seja visível. Também adicionaremos algumas transições simples para trazer o efeito para a vida. Você pode pegar o código para cada etapa neste repo de Github, aqui .

01. Comece com HTML

Primeiro, vamos obter o nosso HTML pronto. Nós só precisamos de um & lt; div & gt; , nosso .grampo Classe e nosso texto, mas como estaremos usando pseudo-elementos para este efeito, também adicionaremos um atributo com o mesmo valor que o texto para que possamos lê-lo no CSS em vez de codificá-lo.

 & lt; div classe = "clip" conteúdo-conteúdo = "uma demonstração de recorte" & gt;
Uma demonstração de recorte
& lt; / div & gt;

Em seguida, queremos preencher a tela e alinhar o Text Dead Center - podemos usar alguns Flexbox. magia para isso. Vamos também estilo e dimensionar o texto.

 .clip {
// preenche a tela
Posição: Absoluto;
top: 0;
Esquerda: 0;
Largura: 100%;
Altura: 100%;
// alinhamento
Exibir: flex; // use flex para alinhamento
justificar-conteúdo: centro; // alinhamento horizontal
alinhar-artigos: centro; // Alinhamento vertical
// estilo de texto
Font-família: 'Trabalho Sans', Arial, Helvetica, Sans-Serif; // Work Sans está disponível no Google Fonts
Peso de fonte: 800;
Tamanho da fonte: 8rem;
Alinhamento de texto: centro;
Text-Transform: maiúsculas;
}

02. Adicione um pouco de estilo

Agora podemos estilizar o ::antes e ::depois de pseudo-elementos, com cada uma camada no topo do texto. Por padrão, ::depois de terá o maior z-índice. A prática attr () seletor vai ler o valor do nosso conteúdo de dados. atributo.

Os pseudo-elementos compartilharão as propriedades de posição e flexbox, para que possamos refatorar nossos CSS ligeiramente e alavancar o poder do SCS para manter nossa folha de estilo. O estilo de fonte será herdado. Estamos usando ... para denotar as propriedades que já cobrimos.

 .clip {
...
// Posição auto (& amp;) e pseudo-elementos (antes / depois)
& amp;,
& amp; :: antes,
& amp; :: depois de {
  Posição: Absoluto;
  top: 0;
  Esquerda: 0;
  Largura: 100%;
  Altura: 100%;
  Exibir: flex; // use flex para alinhamento
  justificar-conteúdo: centro; // alinhamento horizontal
  alinhar-artigos: centro; // Alinhamento vertical
}
& amp; :: antes,
& amp; :: depois de {
  Conteúdo: Attr (conteúdo de dados); // Use o valor do atributo como o conteúdo
}
}

O resultado no navegador deve parecer idêntico, porque os pseudo-elementos estão sentados diretamente no topo do texto. Você pode modificar seus estilos em Devtools. para ver como eles são em camadas.

03. Ajuste fundos e cores

Hora de dar a cada camada uma cor e fundo diferentes - vamos para algumas cores negrito, on-tendas, neon que predefinidas como variáveis. Também podemos forçar o texto a envolver em várias linhas usando um truque de preenchimento CSS em vez de adicioná-los no HTML.

Isso é útil, de outra forma, teríamos que usar dois tipos diferentes de quebras de linha: & lt; BR & GT; dentro de & lt; div & gt; e quanto mais obscuro \UMA no atributo.

 .clip {
...
& amp;,
& amp; :: antes,
& amp; :: depois de {
  preenchimento: 0 50%;
  Caixa-dimensionamento: border-box;
}
& amp; :: antes {
  cor: $ branco;
  Fundo: $-de-rosa;
}
& amp; :: depois de {
  cor: $ rosa;
  Fundo: $ azul;
}
}

O truque de preenchimento funciona dando a largura horizontal de texto zero, forçando o navegador a envolver cada palavra a uma nova linha.

04. clipe o texto

Tempo para o bit interessante - estamos prontos para começar a recorte nosso texto. Vamos criar um clipe diagonal, cortando a tela em dois triângulos da parte inferior esquerda para a direita.

O ::antes pseudo-elemento só será visível no triângulo superior esquerdo, e ::depois de O pseudo-elemento só será visível no triângulo inferior direito. Aqui está o código para conseguir isso:

 .clip {
...
& amp; :: antes {
  Caminho de Clipe: Polígono (0 0, 100% 0, 0 100%, 0 100%);
}
& amp; :: depois de {
  Caminho Clipe: Polígono (100% 0, 100% 100%, 0 100%, 100% 0);
}
}

Isso cria polígonos com quatro pontos. Cada ponto é descrito por um par coordenado; Simplesmente um X (à esquerda para a direita) e y (top to bottom) valor. O valor pode ser absoluto (por exemplo: px) ou parente (por exemplo:%). Os pontos são referenciados ao canto superior esquerdo, então os pontos em 100% 100% estão no canto inferior direito.

Imagine linhas conectando cada um dos pontos na ordem em que eles estão listados para formar as formas. No ::antes Polígono começa no canto superior esquerdo (0 0) , se move pela tela para o canto superior direito (100% 0) e, em seguida, até o canto inferior esquerdo (0 100%) .

Espero que você veja seu texto recortado agora. Redimensione o navegador e você verá o recorte reagir de acordo.

Se você estiver usando o Chrome, provavelmente verá alguns problemas relativos ao redimensionar, causado pelas camadas compostas do Chrome. Infelizmente, porque a demonstração é de tela cheia, recomendada Vai mudar: transformar propriedade eo Transform: translatez (0) Hack não corrige isso. No entanto, se você mudar .grampo para Posição: fixo; funciona.

 clip {
& amp;,
& amp; :: antes,
& amp; :: depois de {
  Posição: fixo;
}
}

Tenha em mente que o Chrome está tentando ser útil, e essa solução alternativa terá um impacto no desempenho. Certifique-se de perfurar o desempenho ao fazer coisas assim na produção.

05. Adicione transições

Agora que temos nosso texto recortado, vamos trazer para a vida com algumas transições. A boa notícia é que você pode simplesmente transitar o Clip-path propriedade para que o navegador faça todo o trabalho duro. Vamos ativar as transições nos pseudo-elementos e, em seguida, definir quatro estados diferentes para transição entre.

Estado 1: Este é o estado inicial, então vamos criar três outros

Adicione cada bloco na parte inferior do seu CSS como você for, para que você possa ver o que parece.

Estado 2: mova os triângulos para longe ligeiramente para revelar o fundo

Isso vai parecer um pouco como a bandeira da República do Congo. Removendo 20 por cento da ponta de cada triângulo de polígono fará o truque.

Estado 3: Morph os triângulos em retângulos

Isso é semelhante ao tricolor francês, no sentido inverso.

E quanto ao quarto par coordenado? Bem, é aqui que vem útil. Acontece que a transição Clip-path Somente funciona se a função de forma usada for a mesma (então polígono & gt; polígono) e o número de pontos usados é o mesmo - o navegador irá transitar cada ponto individual. É por isso que temos esse quarto ponto oculto - nos permite transição perfeitamente de um triângulo para um retângulo, apenas revelamos que o quarto ponto quando precisamos disso.

 .clip {
& amp; :: antes {
  Caminho Clipe: Polígono (0 0, 40% 0, 40% 100%, 0 100%);
}
& amp; :: depois de {
  Caminho Clipe: Polígono (100% 0, 100% 100%, 60% 100%, 60% 0);
}
}

Estado 4: Torça esses polígonos

Ajudando ao nosso tema da bandeira, isso se assemelharia a "eu preciso de um puxão" no mundo da sinalização da bandeira marítima.

Aqui estamos torcendo os polígonos para atravessarem no centro e formam dois triângulos cada. É quando as transições podem ajudá-lo a entender os pares coordenados. Ao realmente desacelerar a transição, você pode ver como cada ponto se move pela tela para sua nova posição, e você começa a entender como o pedido dos pares afeta a transição. Na verdade, dá-lhe bastante controle sobre a transição.

 .clip {
& amp; :: antes {
  Caminho Clipe: Polígono (100% 0, 0, 100% 100%, 0 100%);
}
& amp; :: depois de {
  Caminho Clipe: Polígono (100% 0, 100% 100%, 0 0, 0 100%);
}
}

Embrulhar

Estamos todos definidos, mas ainda não somos capazes de mudar os estados, o que significa que você não consegue ver as transições em ação. Há muitas maneiras de conseguir isso, então cabe a você. No repo e codepen, usei uma solução 100 por cento de javascript com botões de rádio ocultos e o seletor de irmãs ~ General - Dê uma olhada. Você também pode verificar o codepen deste tutorial aqui .

Este artigo surgiu originalmente na edição 298 internet , a revista para web designers e desenvolvedores profissionais - oferecendo as últimas novas tendências, tecnologias e técnicas da Web. Comprar edição 298 aqui ou Inscreva-se na NET AQUI .

Oferta especial de Natal: Economize até 47% em uma assinatura para a rede para você ou um amigo para o Natal. É uma oferta limitada, então se mova rapidamente ...

Artigos relacionados:

28 Exemplos pendentes de CSS
Como criar um layout de pirâmide com formas de CSS
Truques CSS para revolucionar seus layouts da web

Como criar efeitos incríveis com formas CSS

01. Comece com HTML

02. Adicione um pouco de estilo

03. Ajuste fundos e cores

04. clipe o texto

05. Adicione transições

Embrulhar

Como - Artigos mais populares

Lino PrintMaking: uma introdução

Como desenhar uma rosa: Dicas iniciantes e avançadas

Animate SVG com JavaScript

Use a ferramenta de caneta e texturas para adicionar profundidade no Photoshop

Criar nuvens com fumefx para 3ds max

Como criar um robô papercraft

Como dominar a anatomia da criatura

Compreender a técnica de pintura molhada

Categorias