CSS Tip

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: css-generators.com/ribbon-shapes