画简单的input 平行四边形输入框

个人记录 样式极度简陋

<style>
.box{
    width: 500px;
    height: 500px;
    border: 1px solid #333;
    padding: 10px;
}

.input_box{
    height: 50px;
    padding:0px 0px 0px 25px ;
    border: 1px solid #333;
    transform: skew(45deg);  /* 转成平行四边行的*/
    box-sizing: border-box;
}
.input_sbox{
    height: 99%;
    border: 1px;
    outline: none; /* 去除选中状态边框 */
    transform: skew(-45deg); /*将input框转正*/
    box-sizing: border-box;
}
</style>

<div class="box">
    <div class="input_box">
        <input class="input_sbox" type="text">
    </div>
</div>
</body>