Pure CSS Corner Banner

by @edent | , | 2 comments | Read ~149 times.

Scratching my own itch. Here's how to make a "beta" ribbon in CSS.

Place this HTML at the end of your document:

<hr id="beta" aria-label="Warning this page is a beta.">

(Doesn't have to be <hr> - use whatever makes sense in your design.)

Then, add this CSS:

#beta {
    float: left;
    top: 1.5em;
    left: -3em;
    position: absolute; /* or fixed if you want it to always be visible */
    transform: rotate(-45deg);
    background: red;
    color: white;
    font-weight: bold;
    padding-left: 3em;  padding-right: 3em;
    padding-top: .5em;  padding-bottom: .5em;
    border: 0;  margin: 0;
    height: auto;   width: auto;
    z-index: 999999999; /* or whatever is needed to show on top of other elements */
}
#beta::before {
    content: "⚠️ BETA ⚠️";
}

You can adjust and simplify the CSS as per your requirements and your site's existing CSS.

"But," I hear you cry, "that isn't pure CSS!" You're right, of course. Luckily, there's a ✨magical✨ way this can be added with absolutely zero HTML!!

As pointed out by Mathias Bynens, you don't need any HTML to create a web page. Rather than use an <hr> element, we can just append the the CSS ::after the <body>.

body::after {
    float: left;
    top: 1.5em;
    position: absolute;
    transform: rotate(-45deg);
    background: red;
    color: white;
    font-weight: bold;
    left: -3em;
    padding-left: 3em;    padding-right: 3em;
    padding-top: .5em;    padding-bottom: .5em;
    border: 0px;
    margin: 0;
    z-index: 999999999;
    content: "⚠️ BETA ⚠️";
}

But, why though?

A few reasons:

  • I didn't want the banner to be accidentally select as text.
  • Using an <hr> feels like somewhat better semantics than yet another bloody <div>!
  • Dunno. Just seemed like a good idea at the time - and I could only find ribbons with lots of complicated stuff I didn't need.

2 thoughts on “Pure CSS Corner Banner

  1. Matt says:

    Works like a charm on a Redmi Note 10 Pro, with the Brave browser.



Leave a Reply

Your email address will not be published. Required fields are marked *