这个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

- saji89

---

这是您可以从代码中获得的内容：http://jsfiddle.net/S4JsN/ 不确定您的问题是关于什么的。 - giker

感谢您的评论。我知道输出结果是什么，但想知道它是如何工作的。无论如何，现在我已经得到了答案，感谢@thirtydot。 - saji89

Answer 1

正在使用“三角形边框技巧”。

阅读此问题以获取您想要的所有信息：CSS三角形是如何工作的？

- thirtydot