HTML5 Game Development by Example(Second Edition)

Time for action – creating a ribbon in CSS3

We will create a new record ribbon and display it when a player breaks their last score. So, carry out the following steps:

1. First, open index.html where we will add the ribbon HTML markup.
2. Add the following highlighted HTML right after popup-box and before popup-box-content:

   <div id="popup-box">
     <div class="ribbon hide">
       <div class="ribbon-body">
         <span>New Record</span>
       </div>
       <div class="triangle"></div>
     </div>
     <div id="popup-box-content">
     ...

3. Next, we need to focus on the style sheet. The entire ribbon effect is done in CSS. Open the matchgame.css file in a text editor.
4. In the popup-box styling, we need to add a relative position to it. We do this as follows:

   #popup-box {
     position: relative;
   }

5. Then, we need ...