Create a Simple Ribbon With CSS

Introduction

In this example, we will create a simple Ribbon using CSS. Step 1: First we will create the main div, in which the ribbon will appear:

Here we set the background of the div and rounded corner using the radius property and set the z-index property (this property is useful to display the div under the ribbon). Step 2: Now we will create a ribbon using the <div> tag like this: Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG, and XUL. From Wikipedia</p> Here we will specify three div elements (the first one shows the front part of the ribbon, the second will show the left part and the third will show the right part of the ribbon). First, we will set the property of the front part of the ribbon: