Github Style Corner Ribbons In Pure CSS – Ribbons.css

Preview:

Description:

Ribbons.css is a CSS library to create ‘Form Me On Github’ like corner ribbons on the webpage.

How to use it:

1. Download and place the Ribbons.css stylesheet in the document.

<link rel="stylesheet" href="./src/css/ribbons.css" />

2. Add the CSS class ribbon to your ribbon link and done.

<a class="ribbon" href="https://cssscript.com">Fork me on CSSScript</a>

3. Determine the position of the ribbon with the following CSS classes:

• ribbon-top-right
• ribbon-bottom-left
• ribbon-bottom-right

<a class="ribbon ribbon-top-right" href="https://cssscript.com">Fork me on CSSScript</a>
<a class="ribbon ribbon-bottom-left" href="https://cssscript.com">Fork me on CSSScript</a>
<a class="ribbon ribbon-bottom-right" href="https://cssscript.com">Fork me on CSSScript</a>

4. Customize the ribbon size.

• sm: small
• md: middle
• lg: large

<a class="ribbon ribbon-sm" href="https://cssscript.com">Fork me on CSSScript</a>
<a class="ribbon ribbon-md" href="https://cssscript.com">Fork me on CSSScript</a>
<a class="ribbon ribbon-lg" href="https://cssscript.com">Fork me on CSSScript</a>

5. Change the ribbon theme.

• success
• primary

<a class="ribbon ribbon-success" href="https://cssscript.com">Fork me on CSSScript</a>
<a class="ribbon ribbon-primary" href="https://cssscript.com">Fork me on CSSScript</a>