Want a bold, attention-grabbing ribbon banner for headings, badges, or sale tags? Here are two clean CSS techniques to build a sleek ribbon banner you can drop into any layout.
Live Preview: Ribbon Banner
Method 1: Clip-Path Ribbon (Single Element)
.ribbon-clip {
width: 20rem;
height: 6rem;
background: #cd5454;
/* Creates pointed ends for the ribbon */
clip-path: polygon(0 50%, 28px 0, calc(100% - 28px) 0, 100% 50%, calc(100% - 28px) 100%, 28px 100%);
/* Use filter for an outer shadow on clipped shapes */
filter: drop-shadow(0 8px 0 rgba(0,0,0,0.12));
position: relative;
z-index: 0; /* ensure ::before sits behind this element */
margin: 2rem auto;
}
/* Optional: clean "outline" around the full clipped shape */
.ribbon-clip::before {
content: "";
position: absolute;
inset: -2px; /* outline thickness */
background: #fff; /* outline color */
clip-path: inherit; /* reuse the same shape */
z-index: -1; /* place behind the ribbon */
}Method 2: Pseudo-Elements with Border Triangles
.ribbon-borders {
position: relative;
width: 20rem;
height: 4.5rem;
background: #cd5454;
margin: 2rem auto;
}
/* Triangular ends made from CSS borders */
.ribbon-borders::before,
.ribbon-borders::after {
content: "";
position: absolute;
top: 50%; /* center vertically */
transform: translateY(-50%); /* correct for equal top/bottom border widths */
width: 0;
height: 0;
border-style: solid;
}
.ribbon-borders::before {
left: -1.2rem;
border-width: 2.25rem 1.2rem 2.25rem 0;
border-color: transparent #cd5454 transparent transparent;
}
.ribbon-borders::after {
right: -1.2rem;
border-width: 2.25rem 0 2.25rem 1.2rem;
border-color: transparent transparent transparent #cd5454;
}
/* Consistent shadow for the whole ribbon (body + triangles)
Wrap .ribbon-borders with .ribbon-wrap and apply drop-shadow there */
.ribbon-wrap {
display: inline-block;
filter: drop-shadow(0 8px 0 rgba(0,0,0,0.12));
}Usage for the wrapper:
<div class="ribbon-wrap">
<div class="ribbon-borders">Your text</div>
</div>How This Works
The clip-path method draws a single hexagon-like shape with arrowed ends by specifying polygon coordinates. It’s compact, needs only one element, and is easy to size and color. For outer shadows on clipped shapes, use filter: drop-shadow(…). If you need an outline, create a pseudo-element behind the element with the same clip-path.
The pseudo-element method uses the classic CSS border triangle trick: two triangles are positioned on each side of a central rectangle. Because box-shadow applies only to the central rectangle, use a wrapper with filter: drop-shadow(…) (as shown) to cast a consistent shadow across the entire shape. Alternatively, you could add matching effects to the triangles themselves.
How to Center Content Inside a Ribbon Banner
The easiest approaches are Flexbox or Grid. Add one of the snippets below to your ribbon selector to perfectly center text or icons.
Method 1: Use CSS Flexbox
.ribbon-clip,
.ribbon-borders {
display: flex;
justify-content: center;
align-items: center;
}Method 2: Use CSS Grid
.ribbon-clip,
.ribbon-borders {
display: grid;
place-items: center;
}When to Use Each Shape Method
Use clip-path when you want a single, clean element with simple geometry and easy responsiveness. Use pseudo-elements when you need more detailed control over the ends (e.g., different colors, shadows, or animations) but don’t mind a slightly more complex setup.
Quick Customizations
Change the ribbon color by updating background: #cd5454; and adjust the point angle by increasing or decreasing the pixel values in clip-path or the border-width values in the pseudo-elements.
Need an outer shadow? Prefer filter: drop-shadow(…) instead of box-shadow for both methods. For a crisp outline on clip-path ribbons, use the ::before technique shown above and tweak inset for thickness and background for color.
Accessibility & SEO
Ensure sufficient color contrast for any text placed on the ribbon and use clear, descriptive headings or labels so the banner’s message is accessible to screen readers.