Criando borda inferior de 3 cores com CSS - Bruno Devx - BR Criativus

post #2574

Criando borda inferior de 3 cores com CSS

Publicado em: 07/03/2023 / Atualizado em: 07/03/2023

Categorias: BlogCSS

Caso queira fazer um efeito de divisão com borda no CSS, é possível usar a propriedade abaixo:

.borda {
  border-bottom: 5px solid #000;
}

Onde 5px é o tamanho da sua borda, solid é o modelo, e o código #000 é a cor.

Porem, caso queira criar essa mesma borda inferior em seu elemento, mas precisa que ela tenha 3 cores, onde cada cor ocupa um mesmo tamanho, você pode aplicar esta técnica:

.borda {
    --cor1: #009640;
    --cor2: #0080B5;
    --cor3: #ED6A1D;
}

.borda {
    background:
     linear-gradient(
       to right,
       var(--cor1) 0, 
       var(--cor1) 33.3%,
       var(--cor2) 33.3%, 
       var(--cor2) 66.6%, 
       var(--cor3) 66.6%, 
       var(--cor3)) bottom no-repeat;
   background-size: 100% 5px;
}

Espero que este post tenha lhe ajudado. Um forte abraço e até o próximo post.

Publicações recomendadas:


Link Direto

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link direto abaixo. Basta copiar.

bruno.art.br/?p=2574

ID de Referência: 2574

Sugira uma publicação

Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.

Clique aqui e entre em contato