How to draw a ribbon(gift loop or label) on a div?

Question

How do I draw this green (Ribbon) loop in the top right corner of the center div?

I couldn’t find a way to do it, could someone help me with that? After the answer I can edit the question to make it less centralized for my case.

.box{
  background-color:red;
}
.box p{
  text-align:center;
  color:white;
}
.box > input{
  margin-left:50%;
}

<div class="box">
  <p>R$ 180,00</p>
  <p>1 mês</p>
  <input type="radio">5
<div>

Answer 1

For the record, this kind of effect is usually called "Ribbon", as it resembles a gift tie, box or similar use

It will not be enough to just rotate a DIV, we will have to "trim it", IE, we will have to create a main element, only use ::before and ::after won’t work.

To rotate we’ll use

transform: rotate(45deg);

To avoid Ribbon affecting the other elements we will use when clicking or selecting some text or element, because the main element gets bigger than Ribbon, even if you can’t "see it":

pointer-events: none;

Restores events in Ribbon content

pointer-events: auto;

And the "main", to trim the Ribbon we will use:

overflow: hidden;

The element will have to be something like:

<div class="seu-elemento">
    <div class="ribbon">
        <div class="ribbon-content">Novo</div>
    </div>
</div>

Note that the seu-elemento refers to the element you want to apply, it needs to receive:

position: relative;

The effect should be like this:

Note: this way works even in the Internet Explorer 9

.ribbon {
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
    height: 100px;
    overflow: hidden;
    pointer-events: none; /* impede que o ribbon atrapalhe outros elementos*/
}

.ribbon > .ribbon-content {
    position: relative;
    top: 15px;
    padding: 5px 0;
    background-color: #f00;
    width: 150%;
    transform: rotate(45deg);
    text-align: center;
    box-shadow: 1px 1px 1px rgba(0,0,0,.5);
    pointer-events: auto; /* restaura os eventos somente para o conteudo */
}


/* efeitos somente para teste*/
body {
    background: #cfcfcf;
}

.seu-elemento {
    position: relative;
    width: 200px;
    height: 400px;
    background: #fff;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
}

<div class="seu-elemento">
    <div class="ribbon">
        <div class="ribbon-content">Novo</div>
    </div>
</div>

<div class="seu-elemento">
    <div class="ribbon">
        <div class="ribbon-content">Novo</div>
    </div>
</div>

<div class="seu-elemento">
    <div class="ribbon">
        <div class="ribbon-content">Novo</div>
    </div>
</div>

Answer 2

Vc can use pseudo-elements ::before and ::after for that reason.

In the ::before you use a linear-gradiente in 45deg, and in the ::after you put the content:"novo"

See how it looks in the example:

.container {
	width: 190px;
	height: 160px;
	position: relative;
	border: 1px solid;
	overflow: hidden;
}
.container::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 80px;
	height: 80px;
	background-image: linear-gradient(45deg, transparent 50%, green 50%, green 75%, transparent 75%);
}
.container::after {
	content: "novo";
	position: absolute;
	top: -10px;
	right: -10px;
	width: 80px;
	height: 80px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	transform: rotate(45deg);
}
.box{
	background-color:#999;
  float:left;
}
.box p{
	text-align:center;
	color:white;
}
.box > input{
	margin-left:50%;
}

<div class="container box">
  <p>R$ 180,00</p>
  <p>1 mês</p>
  <input type="radio">5
</div>
<div class="container box">
  <p>R$ 180,00</p>
  <p>1 mês</p>
  <input type="radio">5
</div>
<div class="container box">
  <p>R$ 180,00</p>
  <p>1 mês</p>
  <input type="radio">5
</div>

Answer 3

body{
  background-color: #C7C7C7;
}

.wrapper{
  width: 100%;
  max-width: 600px;
  margin: auto;
  font-size: 0;
  padding: 20px;
  box-sizing: border-box;
  text-align: center;
}

.box {
  display: inline-block;
  width: 32%;
  background-color: #FFF;
  margin: 0 2px;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

.etiqueta{
  position: absolute;
  top: 10px;
  right: -30px;
  width: 100px;
  background-color: green;
  color: #FFF;
  font-size: 15px;
  transform: rotateZ(45deg);
}

.box p {
  text-align: center;
  color: #000;
  font-size: 15px;
}

<div class="wrapper">
  <div class="box">
    <p>R$ 310,00</p>
    <p>1 mês</p>
    <input type="radio">5
    
    <div class="etiqueta">Novo</div>
  </div>

  <div class="box">
    <p>R$ 270,00</p>
    <p>1 mês</p>
    <input type="radio">5
    
    <div class="etiqueta">Novo</div>
  </div>

  <div class="box">
    <p>R$ 2900,00</p>
    <p>1 ano</p>
    <input type="radio">5
    
    <div class="etiqueta">Novo</div>
  </div>
</div>