Skip to main content

A fancy title divider II

After the previous one, here is another fancy design for your title

A title with a fancy decoration

.fancy {
--b: 5px; /* control the border thickness */
--w: 100px; /* control the width of the line*/
--h: 1.6em; /* control the height of the element */
--c: #0B486B;

padding: 0 calc(2*var(--h)/3);
line-height: var(--h);
calc(var(--h)/2) 0,100vw 0,
100vw var(--b),100% var(--b),
calc(100% - var(--h)/2) 100%,-100vw 100%,
-100vw calc(100% - var(--b)),0 calc(100% - var(--b))
border-image: var(--_g,linear-gradient(var(--c) 0 0)) fill 0//0 var(--w);
.dash {
background: var(--c);
--_g: repeating-linear-gradient(90deg,var(--c) 0 10px,#0000 0 15px);

See the Pen Fancy title divider with one element by Temani Afif (@t_afif) on CodePen.