Anthony2511
11/20/2019 - 2:30 PM

Create non-rectangular bloc bottom or top

<div class="bloc">
  <div class="bloc__bg"></div>
  <div class="bloc__container"></div>
</div
.bloc{
  position : relative;
  overflow : hidden;
  margin-top : -250px; //example
  
  &__bg{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f3f3f3;
    transform: skewY(-15deg);
    transform-origin: top right; // top or bottom
  }
  
  &__container{
    margin-top: rem(250px);
  }
}