Диагональная маска фона с CSS3?

Question

Мне интересно, как добиться диагонального наложения / маски, как показано ниже:

Answer 1

Это можно сделать, используя обычное изображение, содержащее маску, присвоив ему высокий z-индекс, и расположив его поверх другого изображения:

.bottom-mask {
    position:absolute;
    left:0;
    bottom:0;
    height:45px;
    width:100%;
    z-index:400;
    background:url(../images/bottom-mask.png) no-repeat 50% 0
}

Answer 2

С тех пор я узнал, что есть несколько способов добиться этого эффекта, используя SVG, CSS и наложения фонового изображения. Я решил использовать псевдоэлемент и использовать свойство transform.

https://codepen.io/mattsince87/pen/VExQGm

.box:after {
   content: "";
   display: block;
   position: absolute;
   top: 150px;
   width: 600px;
   height: 600px;
   background: #fff;
   transform: rotate(-15deg);
   transform-origin: center center;
   left: -100px;
}