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?