CSS Shapes
Rails 3.1 asset library providing SCSS @mixins for the following shapes, based on source CSS:
- square
- rectangle
- circle
- oval
- triangle-up
- triangle-down
- triangle-left
- triangle-right
- triangle-topleft
- triangle-topright
- triangle-bottomleft
- triangle-bottomright
- parallelogram
- trapezoid
- star-six
- star-five
- pentagon
- hexagon
- octagon
- heart
- infinity
Usage
After installing the gem using Bundler, just add the following to your SCSS:
@import "shapes";
You only need to add one HTML to make a shape. Here's an example:
<div id='thataway'></div>
Then, include the desired shape mixin. The mixins all have different
options (see rake css_shapes:list, read the _shapes.scss source,
or view examples/example.html in a browser for details), but they each
require at least a color. Here let's make a bright green
right-pointing triangle:
#thataway {
@include triangle-right(#5F0, 120px, 30px);
}
That's 120px wide, 30px high.
Documentation
See rake css_shapes:list from your Rails app, read the _shapes.scss source,
or view examples/example.html in a browser.
Known Issues
The octogon is a bit of an oddball, requiring a background color and being a bit wonky with some custom sizes. Until this math error is fixed or another approach used, your dreams of a page full of differently-sized stop signs will have to wait.
The five-sided star "radius" parameter is probably only roughly accurate.
The infinity shape really only works at the default size or via trial-and-error right now. Complex shapes like this need to be constructed more flexibly. Help?
Fixes appreciated.
Reporting Bugs and Contributing
Please submit bugs and feature requests as GitHub issues. Pull requests are the preferred form of contribution. Kindly contribute back to the main repo if you fork.
Credit
Credit for the shapes go to http://css-tricks.com/examples/ShapesOfCSS/ and the associated contributors. This library just makes it easy to reuse the shapes from SCSS.
All math errors are probably mine. I prefer words and pretty pictures.