有人能帮我理解这个尖角是如何在纯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