Pure CSS Ribbon

Show a ribbon, in a simple CSS, Not my work, found it online, but it helped a lot

Update 2019Jan28: Added to it flat style to be used according to Bootstrap 4, like ribbon-flat-danger, ribbon-flat-secondary, etc.

Originally from https://www.cssportal.com/css-ribbon-generator/

You may also check https://codepen.io/eode9/pen/twkKm

CodeFunctionName

What is this?

Public

Tested

Imported

After you link the css (attached), Use HTML code below to show the ribbon

To link the CSS
<link rel="stylesheet" href="/Assets/css/ribbon.css" >

Then do HTML as ...
<div class="box" >
Right-side ribbon
Some content
<div class="ribbon-right" > <span >Website </span > </div >
</div >

<div class="box" >
default
<div class="ribbon-left" > <span >Website </span > </div >
</div >

<div class="box" >
Other style
<div class="ribbon-website" > <span >Website </span > </div >
</div >

<div class="box" >
Other style
<div class="ribbon-flat-danger" > <span >Website </span > </div >
</div >

<div class="box" >
Other style
<div class="ribbon-flat-warning" > <span >Website </span > </div >
</div >

<div class="box" >
Other style
<div class="ribbon-flat-success" > <span >Website </span > </div >
</div >

<div class="box" >
Other style
<div class="ribbon-flat-dark" > <span >Website </span > </div >
</div >

<div class="box" >
Other style
<div class="ribbon-flat-light" > <span >Website </span > </div >
</div >

<div class="box" >
Other style
<div class="ribbon-flat-primary" > <span >Website </span > </div >
</div >