mirumee/trapecssoid

Name: trapecssoid

Owner: Mirumee Labs

Description: CSS-based trapezoid blocks

Created: 2015-04-16 12:51:36.0

Updated: 2017-01-12 11:09:34.0

Pushed: 2015-05-22 14:40:28.0

Homepage: null

Size: 476

Language: CSS

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

TrapeCSSoid

CSS-based trapezoid blocks
Demo: http://mirumee.github.io/trapecssoid/

Instalation

Via Bower:

r install trapecssoid --save-dev

Usage

Import mixin into your project:

ort 'lib/trapecssoid';

Additional wrapper around your block is needed:

 class="trapecssoid">
<div>Lorem ipsum</div>
v>

Use the mixin:

pecssoid {
@include trapecssoid($border: left, $peak: top, $angle: 15, $color: #3498DB);

Et voilà:

Some other examples:

ref="#" class="trapecssoid">
<span>Lorem ipsum</span>

css
pecssoid {
@include trapecssoid(left, top, 15, #E67E22, $color-hover: lighten(#E67E22, 10%), $child-selector: span);
@include trapecssoid(right, bottom, 15, #E67E22, lighten(#E67E22, 10%), span, $second: true);

 href="#" class="trapecssoid">
<div>Lorem ipsum</div>
v>

css
pecssoid {
@include trapecssoid(top, left, 3, white, $inset: true);
@include trapecssoid(bottom, left, 1, white, $inset: true, $second: true);
background: url("https://placekitten.com/g/1000/300") no-repeat;
background-size: cover;

More of these can be found on the demo page