Html 通过css设置对角文本框边框样式

有人能帮我设计一个文本框边框的样式吗？就像图片中的一样。我试过下面的css，但效果不太好

.addfolder-input {
    border: medium none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin-bottom: 20px;
    width: 100%;
    padding: 0 10px;
    border-top: 0;
   border-right: 0;
   border-bottom: solid 2px #3c5a9a;
   border-left: 0;
   border-radius:5px;
}

---

这是一种可能的方法，在文本框周围使用容器元素，然后在容器中添加一个绝对定位的伪元素，该元素沿X轴旋转，带有一点透视效果

在透视下沿X轴旋转使矩形看起来像是从矩形底部到顶部时，它的两侧彼此远离。伪元素的上边框为空，因为我们不需要它

文本框所需的任何

width

都应设置为容器，因为伪元素和文本框都从其容器中派生其“width”（100%）

.addfolder输入{
字体系列：Arial、Helvetica、无衬线字体；
字体大小：12px；
边缘底部：20px；
宽度：100%；
填充：0 10px；
边界：无；
大纲：无；
}
.集装箱{
位置：相对位置；
宽度：100px；
}
.货柜：之后{
位置：绝对位置；
内容：''；
底部：48%；
左：6px；
宽度：100%；
高度：6px；
边框：2px实心#3c5a9a；
边界顶部：无；
-webkit变换：透视（10px）旋转（-10deg）；
-莫兹变换：透视（10px）旋转（-10deg）；
变换：透视（10px）旋转（-10deg）；
}

如果在文本框周围添加container

div

，您还好吗？仅使用文本框元素实现该边框我认为是不可能的，文本框不能附加伪元素@Harry@Harry：谢谢你的标签：）。。克坦：谢谢你，但下面的答案就是确切的答案needed@aashi：总是乐于助人：）