CSS实现平行四边形布局效果

如何实现下图所示的平行四边形布局效果？

一、skewX的局限

一提到平行四边形，条件反射般的就会想起CSS transform中的skew()/skewX()/skewY()方法，可以让元素斜切，从而实现平行四边形效果

HTML如下：

<div class="input-x">
    <input class="input" placeholder="您的姓名">
</div>

CSS如下，形状的关键就是下面红色高亮的transform:skewX(-10deg)：

.input-x {
    display: inline-block;
    position: relative;
    z-index: 0;
}
.input-x::before {
    content: '';
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    border: 2px solid #ddd;
    background-color: #fff;
    border-radius: 4px;
    transform: skewX(-10deg);