使输入从右侧凹入并从左侧凸出[关闭]

【问题标题】：Make an input concave from right and convex from left [closed]使输入从右侧凹入并从左侧凸出[关闭]
【发布时间】：2015-01-04 23:47:37
【问题描述】：

如何使用 css 实现文本输入的效果？

【问题讨论】：

你已经尝试了什么？
这可以做到，但请向我们展示你的努力。
@Harry，是否可以通过如何做到这一点来说明您的意思？它不知道从哪里开始，也很想看到这一点。
这就是我所拥有的，现在我被困住了：link
@razorsyntax: 伪元素不能添加到input 标签中，因此它需要被包装在一个容器中（如下面的答案），并且只有边框无法实现凹面效果-半径，所以我们应该使用盒子阴影（或）使伪元素为圆形并定位它们。

标签： css input css-shapes

【解决方案1】：

您可以包装input 并使用pseudo 元素使其成为curved 弯曲阴影，您可以使用inset box-shadow 和input，您可以添加padding

* {
  box-sizing: border-box;
}
div {
  display: inline-block;
  position: relative;
  height: 40px;
}
div:after {
  content: '';
  width: 40px;
  height: 100%;
  left: 92%;
  top: 0;
  border-radius: 50%;
  background: white;
  position: absolute;
  box-shadow: inset 2px 0px 0px 0px rgb(184, 170, 170);
}
div input {
  width: 100%;
  height: 100%;
  border: 0;
  display: inline-block;
  border-radius: 30px 0px 0px 30px;
  background: #343434;
  padding: 10px;
  color: white;
  font-size: 20px;
  box-shadow: 2px 1px 3px 0px rgb(184, 170, 170);
}

<div>
  <input type="text" />
</div>

【讨论】：

为什么-ve你能解释一下吗？