Css 使输入从右为凹形，从左为凸形

如何使用css在文本输入上实现这种效果

您可以包装输入并使用伪元素使其弯曲。对于弯曲阴影，您可以使用插入框阴影，对于输入，您可以添加填充

* { 框大小：边框框； } div{ 显示：内联块； 位置：相对位置； 高度：40px； } 部门：之后{ 内容：； 宽度：40px； 身高：100%； 左：92%； 排名：0； 边界半径：50%； 背景：白色； 位置：绝对位置； 盒影：插入2PX0PX0PX RGB184170170； } div输入{ 宽度：100%； 身高：100%； 边界：0； 显示：内联块； 边界半径：30px 0px 0px 30px； 背景：3434； 填充：10px； 颜色：白色； 字体大小：20px； 盒影：2px1px3px0px RGB184170170； }

---

你已经试过什么了？这是可以做到的，但请告诉我们你的努力。@Harry，你能告诉我们你所说的如何做到吗？它不知道从哪里开始，也很想看到这一点。这就是我所拥有的，现在我被卡住了：@razorsyntax:Pseudo元素不能添加到输入标记，因此它需要像下面的答案一样包装在一个容器中，并且仅使用边界半径无法实现凹形效果，因此，我们应该使用框阴影或使伪元素形成圆形，并对其进行定位？