Divisória – Hexacolor

Se você está procurando por uma divisória horizontal com a sua cara, o design da Hexacolor vai te impressionar! Essa charmosa divisória HR usa seis cores divididas em seções que se expandem com o repouso do cursor. É possível utilizá-la como cabeçalho, também! Ela é desenvolvida com HTML e CSS3, então instalá-la em sites ou blogs mais modernos também não será um problema. Além disso, você pode utilizar seus próprios esquemas de cores e estilos de animação.

Exemplo:

Código CSS:
.box { display: flex; width: 100%; height: 8px; margin: 5px 0px 0px 0px; } .box-sm { height: 8px; margin: 0; flex-grow: 1; transition: all .8s ease-in-out; } // Growing the width of box, when hover using flex-grow property .box-sm:hover { flex-grow: 12; } .red { background-color: #FF5852; } .orange { background-color: #FF9000; } .yellow { background-color: #FFD300; } .green { background-color: #3DCD49; } .blue { background-color: #0089D7; } .purple { background-color: #9E44C4; }

Código HTML:
<div class="box"> <div class="box-sm red"></div> <div class="box-sm orange"></div> <div class="box-sm yellow "></div> <div class="box-sm green "></div> <div class="box-sm blue "></div> <div class="box-sm purple"></div> </div>

Inspiração: Replacement for normal <hr> tag, por Sanjeev Yada