Scissors

Type: Mixin

@include scissors();

* You can call mixins with or without gls- namespace (e.g. @include gls-scissors();).

Scissors Sass mixin helps you to cut off the corners of an element. Provides an easy-to-use one-line method to set the size of the cut, and the corners that you want to apply the effect.

The first value helps you select top-left, the second value top-right, the third value bottom-right and the fourth value bottom-left corners.

Github Source Code

Arguments

Name	Type	Description
`–`	`number (with unit)`	Accepts `one` or `four` values. The values must be separated by space. Use `null` value to skip corners 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);
}

//CSS Output
.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));
}

Do as follow to target only the top corners.

.element{
  @include scissors(30px 30px 0 0);
}

//CSS Output
.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));
}

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);
}

//CSS Output
.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));
}

Now, let’s try something really fancy!

For some reason, your design component might look different, but I’m sure you get the idea.

<div class="element">
  <h2>It's a fancy looking title text!</h2>
</div>

.element{
  height: 300px;
  display: flex;
  justify-content: center;
  background-color: #5bc0bb;
  @include scissors(0 0 50% 50%);
  h2 {
    color: white;
    font-size: 2.5em; 
    text-align: center;
  }
}

//CSS Output
.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;
}