css常见效果——棱形图片

难题

在视觉设计中，把图片裁切为棱形是一种常见的手段，这里我们需要实现一下效果

有些同学可能简单的认为，将container旋转45deg就ok了，但是你们想过没有，容器旋转了45deg，图片也会跟着旋转45deg；又有同学说，那我把图片再旋转-45deg，不就行了吗，但是真的可以实现吗?
错误的代码：

  .pic {
            width: 200px;
            transform: rotate(45deg);
            overflow: hidden;
            margin: 100px auto;
        }

        .pic > img {
            max-width: 200px;
            height: 200px;
            transform: rotate(-45deg);        
        }

错误的效果：

所以，不是那么简单的。
我们来思考一个问题，那就是我们设置了overflow: hidden将图片旋转-45deg之外的部分裁剪掉了，那么图片的长度就不是那么长了，我们就需要将图片的长度恢复到多大才能填充到图片那么大呢？
相信不少同学都开始算数学，告诉你们其实需要将图片放大1.414倍（根号二），其实这是一个简单的数学问题，具体的细节就需要各位画个草图解答。
接下来我们只需要将图片变为原来的1.414倍就可以了

  .pic > img {
            max-width: 200px;
            height: 200px;
            /* 将图片大小变为原来的1.414倍撑满整个container */
            transform: rotate(-45deg) scale(1.414);
        }

效果图如下：