Gerillass
v2.1.0Type: Mixin
@include scissors();
* You can call mixins with or without the gls- namespace (e.g. @include gls-scissors();).
The Scissors Sass mixin helps you cut off the corners of an element. It provides an easy one-line method to set the size of the cut and choose the corners you want to apply it to.
Arguments
| Name | Type | Description |
|---|---|---|
$corners | number (with unit) | Accepts one or four values. The values must be separated by a space. Use the null value to skip a corner of the box. |
You can use 0 or null to skip styling the related corner.
Examples
Simply call the mixin and pass just one value to affect all the corners evenly.
.element{
@include scissors(30px);
}.element {
clip-path: polygon(0 30px, 30px 0, calc(100% - 30px) 0, 100% 30px, 100% calc(100% - 30px), calc(100% - 30px) 100%, 30px 100%, 0 calc(100% - 30px));
}Result
Do the following to target only the top corners.
.element{
@include scissors(30px 30px 0 0);
}.element {
clip-path: polygon(0 30px, 30px 0, calc(100% - 30px) 0, 100% 30px, 100% calc(100% - 0px), calc(100% - 0px) 100%, 0px 100%, 0 calc(100% - 0px));
}Result
You can use null to skip a corner as well! The following arrangement will target only the bottom corners.
.element{
@include scissors(null null 50px 50px);
}.element {
clip-path: polygon(0 0px, 0px 0, calc(100% - 0px) 0, 100% 0px, 100% calc(100% - 50px), calc(100% - 50px) 100%, 50px 100%, 0 calc(100% - 50px));
}Result
Now, let's try something really fancy!
<div class="element">
<h2>It's a fancy looking title text!</h2>
</div>.element{
height: 200px;
display: flex;
justify-content: center;
background-color: #5bc0bb;
@include scissors(0 0 50% 50%);
h2 {
color: white;
font-size: 2.5em;
text-align: center;
}
}.element {
height: 200px;
display: flex;
justify-content: center;
background-color: #5bc0bb;
clip-path: polygon(0 0px, 0px 0, calc(100% - 0px) 0, 100% 0px, 100% calc(100% - 50%), calc(100% - 50%) 100%, 50% 100%, 0 calc(100% - 50%));
}
.element h2 {
color: white;
font-size: 2.5em;
text-align: center;
}Result