It is possible to achieve this ribbon using only CSS?
.box {
width: 300px;
height: 300px;
background-color: #a0a0a0;
position: relative;
}
.ribbon {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
border: 25px solid transparent;
border-top: 25px solid #757575;
position: absolute;
bottom: 20px;
right: -50px;
padding: 0 10px;
width: 120px;
color: white;
font-family: sans-serif;
size: 11px;
}
.ribbon .txt {
position: absolute;
top: -20px;
left: 20px;
}
<div class="box">
<div class="ribbon">
<div class="txt">
Example Text
</div>
</div>
<div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With