Diagonal Badge – Diagonal Ribbon with CSS HTML

diagonal badge css tutorial

Diagonal Badge with CSS and HTML

Today we are going to publish one tutorial through which we can make a Diagonal badges over a card or a box featuring something special. These badges are very much in use specially when we want to highlight the box for some feature like ” Special Ediction ” or ” Holiday Discount ” etc

It will look like this :

quotes of the day

So here is CSS for making such thing.

.project {
  margin: 50px;
  display: inline-block;
  position: relative;
  width: 300px;
  height: 200px;
  background-color: #000;
  overflow: hidden;
  border-radius:40px 0px 32px 0px;
  box-shadow:12px 12px 0px #db3434;

.project .badge.red {
  background: #db3434;

.project .badge.diagonal {
  white-space: nowrap;
  position: absolute;
  padding: 5px 100px;
  min-width: 300px;
  transform: rotate(45deg) translate(-37%, 0);
  color: white;
  text-align: center;
  text-transform: uppercase;
  font-size: 12px;
  top: 112px;
  box-sizing: border-box;

Main part which is making the ribbon / badge diagonal is ” transform: rotate(45deg) translate(-37%, 0);

Here is HTML for the above

<div class="project">
    <div class="content">
        Never make a decision in Anger & Never make a promise in Happiness.
        <br /><br /> -- Imam Ali (as)
    <div class="diagonal badge red">Quote of the Day</div>

I hope this tutorial helps our reader.

Do you love more css tutorials ?

Leave a Reply

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

11  +    =  17