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

最新推荐文章于 2022-10-28 11:50:37 发布

爱吃水果的白马

最新推荐文章于 2022-10-28 11:50:37 发布

阅读量314

点赞数

分类专栏： html5+css 文章标签： html css

本文链接：https://blog.csdn.net/qq_48957847/article/details/127568231

版权

html5+css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

个人记录样式极度简陋

<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>