Borda serrilhada com CSS3

Introdução

Neste tutorial vou mostrar para vocês como obter o efeito de borda serrilhada com uso de CSS. Antes da chegada das CSS3 esse efeito era possível somente com uso de imagens de fundo e criação de marcação adicional para receber as imagens (Ver este tutorial).

Nesse tutorial eu vou mostrar como obter o mesmo efeito usando um só elemento da marcação e a função CSS linear-gradient() que é uma funcionalidade prevista na poderosa CSS3.

Alerta: Embora óbvio, convém lembrar que navegadores antigos, tais como IE9 e anteriores não suportam a função CSS linear-gradient(). Mais informações sobre suporte consulte o site caniuse

Códigos

Para exemplificar escolhi o elemento blockquote contendo um texto e destinado a receber a borda serrilhada, mas a técnica pode ser aplicada a qualquer elemento da marcação.

<blockquote>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  Donec congue massa nec velit tincidunt tincidunt. 
  Sed sit amet ullamcorper tellus...
  </p>
</blockquote>

Observe com atenção as regras CSS a seguir e na sequência explicarei a função das mais relevantes declarações de cada uma das regras.

blockquote {
  background: white;  
  min-width: 320px;
  position: relative;
  padding: 10px 5px;
  margin: 0 10px;
  text-align: center;
}

blockquote:after {
  content: "";
  display:block;
  position: absolute;
  width: 100%;
  max-width:40px;
  height: 29px;  
  right: 0;
  bottom: -24px;
  left: 0;
  background: 
    linear-gradient(-45deg, transparent 70%, white 75%), 
    linear-gradient( 45deg, transparent 70%, white 75%);
  background-repeat: repeat-x;
  background-size: 25px 20px, 25px 20px;
  background-position: center;
}

Entendendo o código

Vou detalhar para vocês de um jeito mais simplificado, explicando cada estilo que foi aplicado.

Observem o seletor blockquote:after. Ele significa que APÓS o elemento blockquote serão aplicadas as declarações CSS e é aqui que construiremos o efeito de borda serrilhada. Se eu tivesse escolhido o seletor blockquote:before as declarações seriam aplicadas ANTES do elemento blockquote.

É muito importante que seja usada a declaração content: " " porque é ela que criará um pseudo elemento "vazio" no qual aplicaremos a borda serrilhada.

As oito delarações que se seguem definem as dimensões e o posicionamento do pseudo elemento criado e dispensam explicações adicionais. Observe as declarações para a propriedade background porque é aqui que a "mágica" ocorre.

Agora, vamos à parte mais interessante do nosso código que é o uso da função linear-gradient() para criar uma imagem de fundo serrilhada para o pseudo elemento. Notar que optamos por não usar prefixos proprietários para esta propriedade.

Lea Verou criou uma galeria muito interessante, mostrando inúmeros padrões de imagens definidos com uso da função linear-gradiente(). Aconselho vivamente visitar a galeria e explorar o código CSS que gerou o padrão. O padrão utilizado neste tutorial foi o que Lea Verou denominou "Half Rombes".

Para obter o efeito a propriedade background-repeat foi definida com valor para repetição no eixo x ou seja ele vai estender o serrilhado na horizontal. A propriedade background-size com os valores de largura 25px e altura 20px definem o tamanho de cada um dos "triângulos" do serrilhado e propriedade background-position faz com que a borda seja aplicada de modo a se distribuir de forma simétrica em relação ao eixo mediano vertical do elemento.

Mostramos a seguir a criação do efeito mostrado neste tutorial em uma página hospedada no Codepen. Edite os códigos e faça suas experiências.

VER PEN criada pelo Maujor (@Maujor) no CodePen.

Bônus

Usando os pseudo elementos :before e :after simultaneamente conseguimos aplicar o efeito nas duas laterais do elemento conforme mostrado a seguir:

VER PEN criada pelo Maujor (@Maujor) no CodePen.

Espero que vocês tenham gostado e se sintam motivados a fazer mais experiências com bordas serrilhadas. Compartilhem suas descobertas no Codepen ou outra interface online e divulguem o link.

Se tiver dúvida ou sugestão, por favor e-mail para o autor. Obrigado!

Nota final

A versão original deste tutorial foi editada pelo Maujor® com a devida permissão do autor.

Desafio proposto pelo Maujor®

Criar o efeito de borda serrilhada idêntico ao mostrado neste tutorial, usando declarações CSS somente para o elemento blockquote, ou seja, não use pseudo elementos.

Compartilhe essa matéria com seus amigos