如何這個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

「三角伯德訣竅「正在被使用。

閱讀這個問題對所有你可能想要的信息：How do CSS triangles work?