CSS 3：（文本）输入元素的透明切角如何？

Question

对于一个项目，我必须剪掉（各种）输入元素的边缘，因为这是网站设计的一部分。由于背景在不同屏幕尺寸上可能会有所不同，因此必须透明地切割边缘，这意味着您必须看到边缘被切割的下方元素的背景。

这是我必须实现的目标：

对于圆角，我会执行以下操作：

div {
  padding:30px;
  background-color:#c11;
}

input {
  display:block;
  border-top-right-radius:10px;
  border-bottom-left-radius:10px;
  background-color:#fff;
  border:0;
  height:30px;
  width:300px;
  padding:3px 10px;
}

<div>
<input type="text" placeholder="Search ..." />
</div>

但是我不知道如何做这个方形切割。你知道方法吗？

Answer 1

如果您的目标浏览器支持，您可以使用 Clip-path。可以使用百分比定义路径，因此它适合任何屏幕尺寸。不过，Edge 尚不受支持。

使用Clippy创建路径更容易。

div {
  padding: 30px;
  background: linear-gradient(45deg, #c11, blue);
}

input {
  display: block;
  -webkit-clip-path: polygon(calc(100% - 15px) 0, 100% 15px, 100% 100%, 15px 100%, 0 calc(100% - 15px), 0 0);
  clip-path: polygon(calc(100% - 15px) 0, 100% 15px, 100% 100%, 15px 100%, 0 calc(100% - 15px), 0 0);
  background-color: #fff;
  border: 0;
  height: 30px;
  width: 300px;
  padding: 3px 10px;
}

<div>
  <input type="text" placeholder="Search ..." />
</div>

Answer 2

最简单的方法是在两端添加一个 div 并编辑它们的边框。这样您的搜索...占位符就不会越线，您可以在结束范围之前添加一个按钮作为搜索图标。

.back {
  padding:30px;
  background-color:#c11;
}
.bottom-corner, input, .top-corner, .icon{
  display:inline-block;
  padding:3px 10px;
  vertical-align:middle;
}
.icon{
  background-color:#fff;
  padding-top:10px;
  height:23px;
}
.bottom-corner, .top-corner{
  height: 20px;
}
.bottom-corner{
    border-bottom: 10px solid transparent;
    border-right: 10px solid #fff;
    margin-right: -4px;
}
.top-corner{
  margin-left:-4px;
  border-top: 10px solid transparent;
  border-left: 10px solid #fff;
}
input {
  background-color:#fff;
  border:0;
  height:30px;
  width:300px;
}

<div class="back">
<div class="bottom-corner"></div>
<input type="text" placeholder="Search ..." /><div class="icon">S</div>
<div class="top-corner"></div>
</div>