表单输入上的部分垂直边框

Question

目标：
我试图在表单输入上创建部分垂直边框。期望的效果如下：

问题：
不允许输入元素之前和之后的伪元素，因此这不是一个选项。或者，使用高度来限制输入的大小，左右边框切断文本。

的 LIMITS：
没有额外的HTML元素或图像可以使用，这只需要使用CSS。

可能的解决方案：
我尝试使用有限的步骤创建渐变边框，但无法为单个边框边配置它。

当前代码：

    input[type="text"], input[type="number"], input[type="email"], textarea {
        width: 100%;
        border-radius: 0;
        padding: 0 $size-xs;
        margin: 0;
        margin-bottom: $size-m;
        text-overflow: ellipsis;
        border: 0;
        border-bottom: 1px solid $clr-darker;
        display: block;
     }

Answer 1

你可以像这样使用每一方的渐变：

input {
 border:none;
 padding:10px;
 background:
 /* Bottom side*/
 linear-gradient(to bottom,transparent calc(100% - 2px), #000 0),
 /* Left side : change the 25px to control from where the gradient should start*/
 linear-gradient(to right,#000 50%, transparent 0) 0px 25px/4px 100% no-repeat,
 /* Right side : same as the left side*/
 linear-gradient(to right,transparent 50%, #000 0) 100% 10px/4px 100% no-repeat;
}

<input type="text" placeholder="text">