Shape.LESS

Shape.LESS is a collection of mixins for CSS shapes that we often use in web applications. The aim of this project is to reduce the repitive tasks of a developer required to create shapes using CSS.

Installation

You can download it with Bower:

$ bower install shape.less

Usage

Import the less/shape.less file in your own LESS files, and start using it right away:

@import "path-to-shape.less/less/shape.less";

.my-square {
  .shape-square(100px);
}

Examples

Rectangle

.rectangle {
  .shape-rectangle(100px, 50px);
}

Square

.square {
  .shape-square(50px);
}

Circle

.circle {
  .shape-circle(50px);
}

Oval

.circle {
  .shape-oval(50px);
}

Triangle

Up

.triangle-up {
  .shape-triangle-up(50px);
}

Down

.triangle-down {
  .shape-triangle-down(50px);
}

Left

.triangle-left {
  .shape-triangle-left(50px);
}

Right

.triangle-right {
  .shape-triangle-right(50px);
}

Top left

.triangle-top-left {
  .shape-triangle-top-left(50px);
}

Top right

.triangle-top-right {
  .shape-triangle-top-right(50px);
}

Bottom left

.triangle-bottom-left {
  .shape-triangle-bottom-left(50px);
}

Bottom right

.triangle-bottom-right {
  .shape-triangle-bottom-right(50px);
}

Thanks

Special thanks to Chris Coyier for his Shapes of CSS article.