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

＆＃34;三角边界技巧＆＃34;正在使用。

阅读此问题，了解您可能需要的所有信息：How do CSS triangles work?

如何生成此css仅指向角落

1 个答案: