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>