create-shape

@include create-shape($shape);

Description

This one is a little bit of fun and essentially allows you to clip an element with a series of shapes.

Parameters

$shape (circle | octagon | bevel | nonagon | rabbet)
The shape that you wish to create.

Return

(CSS) clip-path property used to make shape.

Examples

Give profile images a fancy beveled border

.profile-image {
  @include create-shape('bevel');
}

Interaction example