|
In this article, we will learn how to create a ribbon using CSS.
PrerequisitesApproach- The structure consists of a <button> element with the class “btn” containing the text “GFG DSA Course”. Inside the button, there is an <span> element with the class “ribbon” containing the text “NEW”. Additionally, there’s an <h1> element with the text “GeeksForGeeks”.
- The .btn class defines the button style with a green background, white text, padding, border-radius, etc. The .ribbon class styles the ribbon with a specific width, font size, padding, position, background color, and text color. It positions the ribbon absolutely relative to the button, slightly rotated and offset to create the ribbon effect.
- The ribbon shape is created using pseudo-elements ::before and ::after applied to the <h1> element. ::before and ::after elements have a specific width, height, background color, position, and clipping path to create the ribbon-like shapes. They are positioned behind the <h1> text using z-index.
- The ribbon is positioned absolutely relative to its container (the button or the <h1> element). It’s offset using top and right properties to place it at the desired position relative to the container. A slight rotation is applied using the transform property to give it a ribbon-like appearance.
Example: This example shows the implementation of the above-explained approach.
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content=
"width=device-width, initial-scale=1" />
<style>
.btn {
border: none;
border-radius: 5px;
padding: 12px 20px;
font-size: 16px;
cursor: pointer;
background-color: green;
color: white;
position: relative;
}
.ribbon {
width: 60px;
font-size: 14px;
padding: 4px;
position: absolute;
right: -25px;
top: -12px;
text-align: center;
border-radius: 25px;
transform: rotate(20deg);
background-color: #ff9800;
color: white;
}
h1 {
position: relative;
margin: 20px;
padding: 10px 40px;
text-align: center;
background-color: #875e46;
width: 200px;
}
h1::before,
h1::after {
content: "";
width: 80px;
height: 100%;
background-color: #724b34;
position: absolute;
z-index: -1;
top: 20px;
clip-path:
polygon(0 0, 100% 0, 100% 100%,
0 100%, 25% 50%);
background-image:
linear-gradient(45deg, transparent 50%, #5d3922 50%);
background-size: 20px 20px;
background-repeat: no-repeat;
background-position: bottom right;
}
h1::before {
left: -60px;
}
h1::after {
right: -60px;
transform: scaleX(-1);
}
</style>
</head>
<body>
<h2>CSS Ribbon</h2>
<button class="btn">GFG DSA Course
<span class="ribbon">NEW</span>
</button>
<h1>GeeksForGeeks</h1>
</body>
</html>
Output:
.png) Output
|
.gif){kind=small}
