corner-ribbon

corner-ribbon

Corner ribbon CSS (Sass). Demo

Usage

npm install corner-ribbon

HTML

<div style="position: relative; overflow: hidden;">
  <span class="corner-ribbon corner-ribbon--success corner-ribbon--shadow corner-ribbon--default-left-top">Free</span>
</div>

CSS

<link rel="stylesheet" href="node_modules/corner-ribbon/dist/corner-ribbon.min.css">

Sass

Install dependencies.

npm install sass-math

Load dependencies.

@import 'node_modules/sass-math/math';

Custom corner ribbon sizes.

// id => (width, height)
// generates .corner-ribbon--#{ $id }-[left|right]-[top|bottom] modifier classes
// i.e. .corner-ribbon--large-left-top

$corner-ribbon-sizes: (
  large: (200px, 30px)
) !default;

Custom corner ribbon background colors.

// id => #color
// generates .corner-ribbon--#{ $id } modifier classes
// i.e. .corner-ribbon--red

$corner-ribbon-colors: (
    red: #ff0000
) !default;

Import corner ribbon Sass files in your project.

@import 'node_modules/corner-ribbon/sass/variables';
@import 'node_modules/corner-ribbon/sass/corner-ribbon';