How this css only pointed corner was generated

Question

Can somebody help me understand how this pointed corner was actually generated in css only(Rather, please help me understand how this is actually working): The code is-

<p class="test-div">
  <span class="price">
   Rs.5.00
  </span>

</p>

CSS

.test-div {
   margin: 24px 100px 0;
}
.test-div .price:before {
   border-right: 40px solid #25A0DA;
   border-top: 24px solid transparent;
   content: "";
   display: block;
   position: absolute;
   right: 100%;
   top: 0;
}

.test-div .price {
   background-color: #25A0DA;
   color: #FFFFFF;
   display: inline-block;
   margin-left: -2em;
   padding: 0 0.5em;
   position: relative;
   line-height:24px;
   font-size:14px;
}

For a live example please check- http://dabblet.com/gist/1662113

Answer 1

The "triangle border trick" is being used.

Read this question for all the info you could ever want: How do CSS triangles work?