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>