How to achieve this?

This can be achieved by placing a div inside of another block level element that has an overflow:hidden. On the div, use CSS to create a triangle, then rotate that div -45 degrees. Inside of that div, have an absolutely positioned span that contains the text "NEW". Use negative margins to position the triangle and absolute positioning for the "NEW" text. It's kind of hacky and impractical I feel, but it gives you the desired effect. Attached is the CSS and associated markup...

<style type="text/css">

article{
border:1px solid #ccc;
border-radius:10px 0 0 0;
float:left;
padding:10px;
overflow:hidden;
width:300px;}

.triangle{
border-bottom: 60px solid #f16a6c;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
float:left;
margin-left:-62px;
position:relative;
top:-22px;
-webkit-transform: rotate(-45deg);}

.triangle > span{
color:#fff;
font-size:1em;
font-weight:bold;
position:absolute;
right:-26px;
top:40px;}

</style>

<article>
    <div class="triangle">
    <span>NEW</span>
    </div>
    <p>lorem ipsum</p>
</article>

http://codepen.io/HighAltitudeCreative/pen/wIakq

Ibrahim Rodrí­guez - The method John Locke mentioned is how Treehouse did it.

However you can do it in pure CSS in roughly 3 parts:

• use the CSS triangle trick
• use border-radius w/ overflow hidden on the box
• position & rotate the "new" text.

Here's a codepen demo to do that.

I got bored, so I decided to duplicate the look & feel of this in pure CSS3 as a challenge to myself.

Here's a working demo: http://codepen.io/jamesbarnett/pen/sDEom

John Locke Thanks so much! I just checked the Inspect Element in Google Chrome and it's pretty helpful.

Ryan Matsudaira Thanks Ryan! I wish I could do these things that fast! I added your code to my favorites.

James Barnett Awesome! I just wanted to know about the corner but now you duplicated the whole thing I can just check more stuff in it.

Thanks a lot for your help, have a great week!