Html 如何创建像特斯拉赛博卡车订单网站上的输入文本字段？

我想创建一个输入文本字段，如上的（单击“立即购买”后显示），但我不确定如何处理此问题

我已经尝试添加边界半径，但当然，这只会使拐角变圆

以下是我目前的代码：

<style>
        body {
            background-color: black;
        }

        label {
            color: white;
        }

    input {
        width: 300px;
        height: 40px;
        border: solid white 1px;
        background: transparent;
        color: white;
        font-family: 'Consolas';
        font-size: 0.9em;
        font-weight: bold;
        padding: 10px 10px 10px 10px;
        transition: border 0.3s ease-in-out;
        box-sizing: border-box;
        outline-width: 0;
    border-radius: 10px 10px 10px 10px;
    border-style: none;
    border-width: 0 0 3px;
    padding: 3px 10px;
    }

    input:focus {
        border: solid white 3.5px;
    }
    </style>

<label>Test field</label>
<br>
<input type = "text">

身体{
背景色：黑色；
}
标签{
颜色：白色；
}
输入{
宽度：300px；
高度：40px；
边框：纯白1px；
背景：透明；
颜色：白色；
字体系列：“Consolas”；
字号：0.9em；
字体大小：粗体；
填充：10px 10px 10px 10px；
过渡：边界0.3s缓进缓出；
框大小：边框框；
轮廓宽度：0；
边界半径：10px 10px 10px 10px；
边框样式：无；
边框宽度：0.3px；
填充：3x10px；
}
输入：焦点{
边框：纯白3.5px；
}
试验场

---

如果可能的话，我希望这是响应性的，提前谢谢。

他们正在使用剪辑路径和多边形来实现这一点。有关详细信息，请参见本页：

如前所述，通过查看源代码，您可以看到它是一个剪辑路径

特别地，剪辑路径应用于包装器div，如

：：before

伪元素，而不是在输入元素上。下面是一个简单的例子，在网站上使用完全相同的剪辑路径

body，
html{
填充：0；
保证金：0；
背景色：#333；
显示器：flex；
证明内容：中心；
对齐项目：居中；
身高：100%；
}
.包装纸{
宽度：200px；
高度：40px；
位置：相对位置；
显示：块；
}
.wrapper：：之前{
内容：“；
显示：块；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
背景：蓝色；
剪辑路径：多边形（0px 0px，100%0px，100%calc（100%-10px），calc（100%-10px）100%，0px 100%，0px 1.5px，1.5px 1.5px，1.5px calc（100%-1.5px），calc（100%-11.5px）calc（100%-1.5px），calc（100%-1.5px）calc（100%-11.5px），calc（100%-1.5px，0px 1.5px）；
}
输入{
背景：透明；
边框颜色：透明；
边界半径：0；
颜色：白色；
宽度：100%；
身高：100%；
大纲：无；
}

使用浏览器的开发人员工具检查其文本框。他们对每个输入都使用一个包装器

，在

：：before

伪元素上使用

剪辑路径

。这个答案为您提供了一个剪辑路径示例以及一个使用转换的选项：谢谢，我已经做到了，但我无法像在网站上那样将边框添加到剪辑路径。您似乎无法将边框添加到剪辑元素，但此答案有一个解决方法：。这需要给它一个固定的宽度和高度，但是…这里有一个代码笔做同样的事情：