YogeshChauhan.com
How to add a ribbon on top of a container using CSS?
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

Leave a Reply

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to set opacity or transparency using CSS? #3 Pagination in CSS with multiple examples #4 How to make HTML form interactive and using CSS? #5 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #6 How to uninstall Cocoapods from the Mac OS?

Recently Posted

Mar 3 How to embed YouTube or other video links in WordPress? Mar 3 How to change the Login Logo in WordPress? Mar 3 substring() Method in JavaScript Mar 3 Window setInterval() Method in JavaScript Mar 2 How to zoom an element on hover using CSS? Mar 2 the box-sizing property in CSS

You might also like these

Recursive WITH Queries in Postgres (Common Table Expressions)PostgresHow to import MySQL small sample database into phpMySQL?SQL/MySQLValues and Types Basics in JavaScriptJavaScriptHow to change the Login Logo in WordPress?WordPressSome interesting HTML Input Attributes to rememberHTMLCSS align-items property examplesCSS