Pure CSS Corner Banner
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.
| Reply to original comment on twitter.com
| Reply to original comment on twitter.com
@edent says:
left: -3em;toright: -3em;. That should do it. I think the float is superfluous.