TrapeCSSoid

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

Instalation

Via Bower:

bower install trapecssoid --save-dev

Usage

Import mixin into your project:

@import 'lib/trapecssoid';

Additional wrapper around your block is needed:

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

Use the mixin:

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

Et voilà:

Some other examples:

<a href="#" class="trapecssoid">
    <span>Lorem ipsum</span>
</a>

.trapecssoid {
    @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);
}

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

.trapecssoid {
    @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