Borda Zig Zag com Css

Neste artigo vamos fazer um estilo de borda em Zig Zag com css.

Vamos Adicionar o html:

<div class="box zig-zag sombra">
                
   <p>Aqui tem o efeito de Zig Zag com css</p>
   
</div><!--Fecha Box-->

Vamos adicionar o css:

.zig-zag:before {
    display: block;
    content: "";
    width: 100%;
    height: 20px;
    background: linear-gradient(45deg, white 25%, transparent 25%), linear-gradient(-45deg, white 25%, transparent 25%);
    background-size: 20px 20px;
    background-position: -50px;
    position: absolute;
    top: -18px;
    left: 0;
}

.zig-zag:after {
    display: block;
    content: "";
    width: 100%;
    height: 20px;
    background: linear-gradient(135deg, white 25%, transparent 25%), linear-gradient(-135deg, white 25%, transparent 25%);
    background-size: 20px 22px;
    background-position: -50px;
    position: absolute;
    bottom:-20px;
    left: 0;

}


.sombra {

    -webkit-filter: drop-shadow(rgba(0, 0, 0, 0.3) 0px 0px 4px);

}

Veja o Resultado !

Baixar Código Veja Funcionando