How do I draw this green ribbon in the upper right corner of the center div?
Icouldnotfindawaytodoit,couldanyonehelpmewiththis?AftertheanswerIcaneditthequestiontomakeitlesscenteredformycase.
.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>Just to be aware, this type of effect is usually called a "ribbon" , because it resembles a gift, box or similar tie.
It will not only be possible to rotate a DIV, we will have to "trim it", that is, we will have to create a main element, only using ::before and ::after will not work.
To rotate we will use
transform: rotate(45deg);
To prevent the ribbon from affecting other elements, we will use them when clicking or selecting some text or element, as the main element becomes larger than the ribbon, even if it can not "see" it:
pointer-events: none;
Restore events in ribbon content
pointer-events: auto;
And the "main" to trim the ribbon 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 seu-elemento refers to the element you want to apply, it needs to receive:
position: relative;
The effect should look like this:
Note: This works even in 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>
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> You can use pseudo-elements ::before and: :after for this.
No ::before you use linear-gradiente in 45deg , and in ::after you put 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>