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

Public
Tested
My Own Work
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>

Views 1994 Downloads 768

HTML+CSS Graphics
ANmarAmdeen
629
Attachments
Revisions

v5.0