CSS Tip

A Ribbon title to the edge of the screen

Add a ribbon style to your title that extend to the edge of the screen.

Titles having a ribbon style that extend to the left edge of the screen

.ribbon {
  border-image: 
     conic-gradient(
       from 45deg at calc(100% - 1lh),
       #0000 25%,#C7F464 0
     ) fill 0//0 0 0 100vw;
}

See the Pen Full screen Ribbon title by Temani Afif (@t_afif) on CodePen.

Related: smashingmagazine.com/2024/01/css-border-image-property/

More CSS Tips