Home / Snippets / Animation /

Skew banner

The orange strip is a pseudo-element with skewX(-12deg); the label counter-skews so typography stays horizontal while the ribbon reads diagonal.

New in 2026
Widely Supported
skewribbon

Quick implementation

.skew-banner-card::before {
  transform: skewX(-12deg);
  background: linear-gradient(90deg, …);
}
.skew-banner-card__label {
  transform: skewX(12deg);
}

Prompt this to your LLM

Promo callouts.

You are building a diagonal ribbon banner.

Goal: ::before skewed strip; inner text counter-skewed for readability; optional subtle brightness pulse.

Constraints:
- Overflow hidden on parent.
- prefers-reduced-motion: no pulse.

Return CSS.

Why this matters in 2026

Skewed ribbons signal urgency without consuming a full-width marquee.

The logic

Counter-skew on the label undoes the band’s shear so you keep semantic horizontal text.

Accessibility & performance

Ensure contrast on the ribbon; avoid animating only color without a motion alternative.