Create a corner ribbon

Corner ribbons can be useful to mark or highlight a particular element from a list of others. This tutorial will explain how to add a simple corner ribbon.

First we will enter the HTML code which will include a container to hold the content and then an element inside it which will hold the ribbon.

<div class="container">
  <div class="content">
    <!--Your content goes here-->
  </div>
  <div class="ribbon-container">
    <div class="ribbon">PROFILE</div>
  </div>
</div>

where profile is the name on the ribbon

Now we will define the CSS for the container.

.container {
  margin:50px;
  width:400px;
  height:200px;
  background: white;
  box-shadow:0px 0px 8px rgba(0,0,0,0.25);
  position: relative;
}

And then the CSS for the ribbon container. I prefer to create a square element and place it at the right top corner.

.ribbon-container {
  width:120px;
  height:120px;
  overflow: hidden;
  position: absolute;
  top: -3px;
  right: -3px;
}

Now the main element which is the ribbon

.ribbon {
  font:15px;
  color:rgb(230,230,230);
  text-align: center;
  text-shadow: rgba(0,0,0,0.8) 0px 1px 0px;
  transform: rotate(45deg);
  position: relative;
  padding: 5px;
  left: -10px;
  top: 25px;
  width: 160px;
  background-image: -webkit-gradient(linear, left top, left bottom,  from(rgb(200,50,50)), to(rgb(255,100,100)));
  box-shadow:0px 0px 3px rgba(0,0,0,0.3);
}

You need to play around the above CSS properties to create a ribbon that best suits for your elements.