Skip to main content

An Infinite Ribbon Shape for your title

Transform your title into an Infinite Ribbon Shape using a few lines of code

CSS only infinite ribbon shapes

.ribbon {
--r: .8em; /* control the cutout */
--c: #bd1550;

padding-inline: 1lh calc(var(--r) + .25em);
border-image: conic-gradient(var(--c) 0 0) fill 0//9999px;
outline: 9999px solid #0004;
.top {
clip-path: polygon(1lh 100%,100% 100%,calc(100% - var(--r)) 50%,100% 0,1lh 0,1lh -9999px,0 -9999px,0 0);
.bottom {
clip-path: polygon(1lh 0,100% 0,calc(100% - var(--r)) 50%,100% 100%,1lh 100%,1lh 9999px,0 9999px,0 100%);

See the Pen Infinite Ribbon Shapes by Temani Afif (@t_afif) on CodePen.

More Ribbon Shapes: