Today i am going to explain about how to create simple css offer ribbon to image corner. In this example i planing to give the offer band to left corner of the image. Here i used small css tricks to achive this ribbon when you see the below css code you can understand the css trick.
Lot of the Ecommerce website needs this type of ribbons above the product image. This type of ribbon helps the customer to easily identify which products got offers.And you can use it to the banners also. The below example have the full code and the demo page you can view and download code and use it to your website. I hope this will useful.
Codes for css offer ribbon:
<html>
<head>
<style>
body {
background: #EDF1EE;
}
.wrapper {
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
background: #FFF;
border: 1px solid #D4E0D7;
width:300px;
height:200px;
float:left;
margin-right:115px;
background-image:url('thumb-1920-202598.jpg');
}
.badge {
height: 50px;
background: #FF5722;
width: 200px;
text-align: center;
font-size: 16px;
line-height: 50px;
font-family: sans-serif;
color: #FFF;
transform: rotate(-45deg);
position: relative;
top: -2px;
left: -70px;
box-shadow: inset 0px 0px 0px 4px rgba(255, 255, 255, 0.34);
}
.badge:after {
position: absolute;
content: '';
display: block;
height: 100px;
width: 108px;
background: #EDF1EE;
top: -55px;
left: 130px;
transform: rotate(-45deg);
box-shadow: -115px -121px 0px 0px #EDF1EE;
}
.badge .left {
position: absolute;
content: '';
display: block;
top: 50px;
left: 25px;
height: 8px;
width: 8px;
background: linear-gradient(135deg, rgba(255, 87, 34, 1) 50%,rgba(90, 146, 106, 0) 50.1%);
}
.badge .right {
position: absolute;
content: '';
display: block;
top: 50px;
left: 157px;
height: 8px;
width: 8px;
background: linear-gradient(135deg, rgba(255, 87, 34, 1) 50%,rgba(90, 146, 106, 0) 50.1%);
transform: rotate(90deg);
}
</style>
</head>
<body>
<h1>Discount left corner Ribbon using pure css</h1>
<p>This is the demo page of how to set the left corner </p><br><br><br><br><br><br>
<div class="wrapper">
<div class="badge">
<i class="left"></i>
<i class="right"></i>
Offer 20%
</div>
</div>
<div class="wrapper">
<div class="badge">
<i class="left"></i>
<i class="right"></i>
Offer 45%
</div>
</div>
<div class="wrapper">
<div class="badge">
<i class="left"></i>
<i class="right"></i>
Offer 75%
</div>
</div>
</body>
</html>
<head>
<style>
body {
background: #EDF1EE;
}
.wrapper {
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
background: #FFF;
border: 1px solid #D4E0D7;
width:300px;
height:200px;
float:left;
margin-right:115px;
background-image:url('thumb-1920-202598.jpg');
}
.badge {
height: 50px;
background: #FF5722;
width: 200px;
text-align: center;
font-size: 16px;
line-height: 50px;
font-family: sans-serif;
color: #FFF;
transform: rotate(-45deg);
position: relative;
top: -2px;
left: -70px;
box-shadow: inset 0px 0px 0px 4px rgba(255, 255, 255, 0.34);
}
.badge:after {
position: absolute;
content: '';
display: block;
height: 100px;
width: 108px;
background: #EDF1EE;
top: -55px;
left: 130px;
transform: rotate(-45deg);
box-shadow: -115px -121px 0px 0px #EDF1EE;
}
.badge .left {
position: absolute;
content: '';
display: block;
top: 50px;
left: 25px;
height: 8px;
width: 8px;
background: linear-gradient(135deg, rgba(255, 87, 34, 1) 50%,rgba(90, 146, 106, 0) 50.1%);
}
.badge .right {
position: absolute;
content: '';
display: block;
top: 50px;
left: 157px;
height: 8px;
width: 8px;
background: linear-gradient(135deg, rgba(255, 87, 34, 1) 50%,rgba(90, 146, 106, 0) 50.1%);
transform: rotate(90deg);
}
</style>
</head>
<body>
<h1>Discount left corner Ribbon using pure css</h1>
<p>This is the demo page of how to set the left corner </p><br><br><br><br><br><br>
<div class="wrapper">
<div class="badge">
<i class="left"></i>
<i class="right"></i>
Offer 20%
</div>
</div>
<div class="wrapper">
<div class="badge">
<i class="left"></i>
<i class="right"></i>
Offer 45%
</div>
</div>
<div class="wrapper">
<div class="badge">
<i class="left"></i>
<i class="right"></i>
Offer 75%
</div>
</div>
</body>
</html>
0 Comments