在div和输入上使用css的曲线

Question

是否可以仅使用css创建类似的内容？

我认为这是可能的，但是输入字段也可以吗？

Answer 1

您可以使用border-radius属性

制作类似的内容

代码段

＆＃13;

＆＃13;

.container{
  border-radius:5%/100px 100px 100px 100px;
  width: 300px;
  height: 200px;
  border: 1px solid;
}

＆＃13;

<input class="container" />

＆＃13;

＆＃13;

＆＃13;

在此处使用 Fiddle 。更改border-radius百分比并检查用户界面更改

Answer 2

仅使用css是不可能的，但是如果使用横向曲线创建svg图像，则可以执行以下操作：

input {
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}
input::before {
  background: url("curve-sx.svg")
}
input::after {
  background: url("curve-dx.svg")
}