LabEx
EntrarJunte-se

Criando Separadores de Formas com CSS

Beginner

This tutorial is from open-source community. Access the source code

Introdução

Neste laboratório, exploraremos como criar um separador de formas usando CSS. O separador usará uma forma SVG para dividir visualmente dois blocos diferentes. Ao usar o pseudo-elemento ::after e definir a cor de fundo do elemento pai, podemos facilmente personalizar o separador para corresponder ao design geral da nossa página web. Este laboratório fornecerá experiência prática na criação de um separador visualmente atraente e funcional usando CSS.

Este é um Lab Guiado, que fornece instruções passo a passo para ajudá-lo a aprender e praticar. Siga as instruções cuidadosamente para completar cada etapa e ganhar experiência prática. Dados históricos mostram que este é um laboratório de nível iniciante com uma taxa de conclusão de 100%. Recebeu uma taxa de avaliações positivas de 100% dos estudantes.

Separador de Formas

index.html e style.css já foram fornecidos na VM.

Para criar um elemento separador entre dois blocos diferentes usando uma forma SVG, siga estes passos:

  1. Use o pseudo-elemento ::after.
  2. Adicione a forma SVG (um triângulo de 24x12) via um data URI usando a propriedade background-image. A imagem de fundo irá repetir por padrão e cobrir toda a área do pseudo-elemento.
  3. Defina a cor desejada para o separador usando a propriedade background do elemento pai.

Use o seguinte código HTML:

<div class="shape-separator"></div>

E aplique as seguintes regras CSS:

.shape-separator {
  position: relative;
  height: 48px;
  background: #9c27b0;
}

.shape-separator::after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='m12 0l12 12h-24z' fill='transparent'/%3E%3C/svg%3E");
  position: absolute;
  width: 100%;
  height: 12px;
  bottom: 0;
}

Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Resumo

Parabéns! Você concluiu o laboratório de Separador de Formas. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.