YogeshChauhan . com

How to add a ribbon on top of a container using CSS?

in CSS on February 13, 2021

In this post I demonstrated how to add the ribbon inside the container.

We’ll continue the same style and add few more styles to it to make the ribbon come out of the container so that it will look like it’s on the top of the container.

This is our end goal:

ribbon on top of the container

Step 1: Shift the ribbon out of the container.

We’ll add the following code to .rib class.


.rib{
  top: -10px;
  left: -10px;
}

This is how it will look like afterwards:

Step 2: Fill the gap between the ribbon and the container.

After step 1, you can see the small gap between both ends of the ribbon. We are going to fill those gaps using CSS ::before and ::after properties.

Add this CSS code:


.rib::before,
.rib::after {
  border-top-color: transparent;
  border-left-color: transparent;
  position: absolute;
  z-index: -1;
  content: '';
  display: block;
  border: 5px solid navy;
}

.rib::before {
  top: 0;
  right: 0;
}

.rib::after {
  bottom: 0;
  left: 0;
}

The overall container and ribbon will look like this:

Step 3: Finally, adjust the ribbon.

We will replace this code:


.rib span {
  width: 200px;
  right: -35px;
  top: 20px;
}

with this code:


.rib span {
  width: 160px;
  right: -25px;
  top: 25px;
}

That will adjust the width and position of the span inside the ribbon.

Finally, the result we wanted:

dreamhost

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to uninstall Cocoapods from the Mac OS? #4 How to add Read More Read Less Button using JavaScript? #5 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

May 7 How to disable right click and drag and drop of images using jQuery? May 7 How to render Lists in React? May 7 What’s the difference between variables in CSS and SCSS (Sass)? May 7 How to define variables in SCSS (Sass)? May 7 How to show and hide an element on click in React? May 5 Use inline if to make a shorter conditional syntax in React

You might also like these

Debugging in WordPress Part 1: WP_DEBUGWordPressA Step by Step Guide to Make RSS in XML For Any Website or Blog For FreeMiscWhat does it mean by Continuous Integration, Continuous Delivery and Continuous Deployment?MiscWhat is the difference between Loosely Typed Language and Strongly Typed Language?MiscWhat is iFrame in HTML? Why do we need it?HTMLPHP arrays for US states’ full names and abbreviationsPHP