slant

/* 
 * Add slants to edge of a HTML element
 * To use simply add class="slant-up" to your HTML element 
 */

.slant-up {
  clip-path: polygon(0 5vw, 100% 0, 100% calc(100% - 5vw), 0 100%);
}

.slant-down {
  clip-path: polygon(0 0, 100% 5vw, 100% 100%, 0 calc(100% - 5vw));
}

.slant-t-up {
  clip-path: polygon(0 5vw, 100% 0, 100% 100%, 0 100%);
}

.slant-t-down {
  clip-path: polygon(0 0, 100% 5vw, 100% 100%, 0 100%);
}

.slant-b-up {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5vw), 0 100%);
}

.slant-b-down {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 5vw));
}