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

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 1491 Downloads 546

'CSSRibbon', 'CSS3', 'ribbon', 'html', 'custom', 'NotMyWork', 'banner', 'modified', 'custom', 'changed'

ANmarAmdeen
542
Attachments
Graphics HTML+CSS
Revisions

v5.0