/*

by Reno Park <hallo@reno-park.com>
use class="slope top" or class="slope bottom" on any block element

*/

.slope {
  $height: 100px;
  position: relative;

  &::before {
    position: absolute;
    width: 100%;
    height: $height;
    left: 0;
    right: 0;
    background-color: rgba(139, 3, 4, 0.78);
    content: "";
    display: block;
  }

  &.top::before {
    top: -#{$height};
    -webkit-clip-path: polygon(0 0, 0% 100%, 100% 100%);
    clip-path: polygon(0 0, 0% 100%, 100% 100%);
  }

  &.bottom::before {
    bottom: -#{$height};
    -webkit-clip-path: polygon(100% 0, 0 0, 100% 100%);
    clip-path: polygon(100% 0, 0 0, 100% 100%);
  }
}