CSS3对角背景面具？

Question

我想知道如何实现对角叠加/遮罩，如下图：

Answer 1

这可以通过使用包含蒙版的常规图像，使其具有高z-index，并将其绝对定位在另一个图像之上来完成：

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