3

Can somebody help me understand how this pointed corner was actually generated in css only(Rather, please help me understand how this is actually working): The code is-

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

For a live example please check- http://dabblet.com/gist/1662113

Madara's Ghost
  • 172,118
  • 50
  • 264
  • 308
saji89
  • 2,093
  • 4
  • 27
  • 49
  • This is what you can get of your code http://jsfiddle.net/S4JsN/ Not sure what your question is about. – giker Jan 23 '12 at 10:02
  • Thanks for the comment. I know how the output is, but wanted to know how it works. Anyways got the answer now, thanks to @thirtydot – saji89 Jan 23 '12 at 10:31

1 Answers1

6

The "triangle border trick" is being used.

Read this question for all the info you could ever want: How do CSS triangles work?

Community
  • 1
  • 1
thirtydot
  • 224,678
  • 48
  • 389
  • 349