CSS平行四边形的输入框效果实例页面

效果：

代码：

CSS代码：

.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);
    z-index: -1;    
}
.input {
    display: block;
    padding: 8px 10px;
    border: 0; background: none;
}

HTML代码：

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