如何生成此css仅指向角落

Question

有人可以帮我理解这个尖角实际上是如何在css中生成的(相反,请帮助我理解这是如何实际工作的):代码是 -

<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;
}

有关实例,请查看 http://dabblet.com/gist/1662113

Answer 1

正在使用"三角边界技巧".

阅读这个问题,了解您可能想要的所有信息:CSS三角形如何工作？