In this tutorial we will see how to make a Card With Ribbon using HTML and CSS. Pure CSS is used for this purpose, Both HTML and CSS code is given, feel free to use it in your projects.
Table of Contents
HTML Code
HTML Code is given below.
<div class="card">
<span class="ribbon"></span>
</div>
CSS Code
CSS Code is given below.
*
{
margin: 0;
padding: 0;
}
body
{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.card
{
position: relative;
height: 500px;
width: 350px;
box-shadow: 0 5px 20px #aaa;
}
.ribbon
{
display: block;
height: 50px;
width: 320px;
background-color: #02c955;
border-radius: 25px;
border-bottom-right-radius: 0px;
position: absolute;
top: 30px;
left: 55px;
}
.ribbon::before
{
content: '';
position: absolute;
right: 0px;
top: 25px;
border-right: 15px solid #02c955;
border-top: 15px solid rgba(0,0,0,0);
border-left: 15px solid rgba(0,0,0,0);
border-bottom: 15px solid rgba(0,0,0,0);
}
.ribbon::after
{
content: '';
position: absolute;
right: 0px;
top: 25px;
border-right: 25px solid #00ad48;
border-top: 25px solid #00ad48;
border-left: 25px solid rgba(0,0,0,0);
border-bottom: 25px solid rgba(0,0,0,0);
transform: rotate(45deg);
border-radius: 25px;
z-index:-1;
}
Demo
Video Tutorial
Watch our video tutorial on how to make a Card With Ribbon using HTML and CSS.