Add a Plus Mark on a HTML table TD

As I am involved with developing a scheduler for a web application, I thought of publishing an interesting part like below;

So here you see a plus mark on each top left corner inside the TD tag.

Let's see how we do this with simple CSS and HTML.

Copy the following css into your file.

 .note {  
   font-size: 10px;  
   left: -8px;  
   position: relative;  
   top: -8px;  
 }  
 .note::after {  
   border-bottom: 20px solid transparent;  
   border-right: 20px solid transparent;  
   border-top: 20px solid #337ab7;  
   content: "";  
   display: block;  
   height: 0;  
   left: 0;  
   position: absolute;  
   top: 0;  
   width: 0;  
 }  

On each TD you can add the following;

 <td>  
   <div class="note"><i data-target="#appModel" data-toggle="modal" class="fa fa-plus fa-margine"></i></div>  
 </td>  

The font awesome is used for the plus mark.

Enjoy coding :)