Create ribbon-like badge with CSS - html

Question

I have a small box with a slanted corner, that looks like this:
The slanted corner was done with the help of this snippet: https://codepen.io/myf/pen/FLzva. But just in case the link dies, I'll put my scss code here:
.product-info {
position: relative;
padding: $spacer * .5;
padding-right: $spacer * 2;
overflow: hidden;
&-link {
display: block;
a {
color: $gray-dark;
transition: color $animation-fast;
&:hover {
color: $brand-primary;
text-decoration: none;
}
}
}
&-price {
color: $brand-primary;
}
&:before,
&:after {
position: absolute;
content: "";
left: 0;
z-index: -1;
background-color: $gray-lighter;
border-color: $gray-lighter;
}
&:before {
top: 0;
right: 0;
bottom: 35px;
}
&:after {
top: auto;
right: -5px;
bottom: 0;
border-style: solid;
border-width: 35px 35px 0 0;
background-color: transparent;
border-right-color: transparent;
}
}
I now need to be able to add a badge to this box. I thought about doing it with a data attribute; <div class="product-info" data-badge="New">...</div> and if div.product-info has the data attribute, the badge will appear. The badge has to look like this:
I have no idea how to achieve this, unfortunately. A push to the right direction would be much appreciated!

Answer 1

I managed to do it myself with CSS. I don't know how good the solution is and how reusable my code is, but it works for my case. I didn't do it with a data-attribute, as I first intended, because I feel like this would've been even more a pain in the ass. I created separate elements and I just have to be careful where to put it in the HTML structure. Here is the whole SCSS code with comments:
.product-badge-wrapper { /* I needed the wrapper for positioning the badge */
position: absolute;
bottom: 0;
right: 0;
.product-badge { /* This is the actual badge */
position: relative;
width: 100px;
overflow: hidden;
&.red {
/* I need the badge in two versions, a gray version and a red version.
* The .red class just deals with some colors and can be ignored. */
&:before,
&:after {
border-color: $brand-primary;
background-color: transparent;
}
&:after {
background-color: transparent;
border-left-color: transparent;
}
.product-badge-content {
&:before {
border-color: darken($brand-primary, 10%);
border-left-color: transparent;
border-right-color: transparent;
}
}
}
/* These next few :befores and :afters are for the general shape
of The badge. This is just the rectangle with the 45deg slant*/
&:before,
&:after {
content: "";
position: absolute;
left: 0;
background-color: transparent;
border-color: $gray-light;
}
&:before {
top: 20px;
right: 0;
bottom: 0;
}
&:after {
bottom: auto;
left: -1px;
top: -10px;
border-style: solid;
border-width: 0 0 75px 75px; /* This is where the main magic for the slant happens */
background-color: transparent;
border-left-color: transparent;
width: 100px;
}
/* Now for the little fold I needed an extra class to attach a
:before to. This class seems really bloated and could be trimmed
down probably. A lot of it is just positioning and text stuff */
.product-badge-content {
height: 43px;
padding-right: 5px;
padding-left: 22px;
display: flex;
justify-content: flex-end;
align-items: center;
text-align: right;
text-transform: uppercase;
font-weight: 700;
position: relative;
z-index: 10;
color: $white-base;
&.text-small {
font-size: .7rem;
font-weight: 400 !important;
}
/* This is where the fold is created */
&:before {
content: "";
position: absolute;
left: 11px;
bottom: 0;
display: block;
border-style: solid;
border-color: $gray-dark;
border-left-color: transparent;
border-right-color: transparent;
border-width: 10px 10px 0 10px; /* Magic happens here. We create a downward arrow */
}
}
}
}
And here is how I place it in the HTML code
<div class="product-info-wrapper">
<div class="product-info">
<!-- Gray box with product name and price -->
</div>
<!-- Badge here -->
<div class="product-badge-wrapper">
<div class="product-badge">
<div class="product-badge-content text-small">
nicht<br>auf lager
</div>
</div>
</div>
</div>
There are a lot of absolutely set dimensions, which is what I meant with "I don't know how reusable my code is". You'd have to play around with the numbers, if you need something like this. There probably are better solutions, but for now it works for the project I'm working on.