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 :

So here is CSS for making such thing.

<style>
.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;
  right:-190px;
  box-sizing: border-box;
  font-family:'Tahoma',Arial;
}
.content{
    padding:46px;color:#fff;font-size:19px;
}
</style>

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>
    <div class="diagonal badge red">Quote of the Day</div>
</div>

I hope this tutorial helps our reader.

Do you love more css tutorials ?

• Border Animation with the help of CSS3
• How to use Mix-blend mode in CSS