Pure CSS Corner Banner
By @edent
· css HTML · 5 comments · 350 words · read ~1,397 times.
Scratching my own itch. Here's how to make a "beta" ribbon in CSS.
Place this HTML at the end of your document:
HTML
<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:
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.
Neat and looks good. Can’t ask for more.
Works like a charm on a Redmi Note 10 Pro, with the Brave browser.
Anyone have an inkling how to do this for the upper right instead of upper left? I wasn’t having much luck tinkering with it.
@edent says:
Change the rotation to be positive, and change the
left: -3em;toright: -3em;. That should do it. I think the float is superfluous.great tips. ... more interesting is just this page. It scores well on a quick accessibility check, and visually it's interesting like a magazine. lots of little things going on. the calendar stamp for the date of the post. ... the little things. Phases of the moon? anyways, thanks for the good read.