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

Question

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

这是我必须实现的目标：

圆角我会做以下事情：

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

但是我不知道怎么做这个方形切割。你知道吗？

Answer 1

如果目标浏览器支持剪辑路径，则可以使用剪辑路径。可以使用百分比定义路径，因此它适合任何屏幕大小。但是，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

更好的方法是使用边框

  

它将支持所有浏览器。

请参阅https://jsfiddle.net/kndx9od8/

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

div.con:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  border-bottom: 13px solid #c11;
  border-right: 14px solid transparent;
}

div.con:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  border-top: 13px solid #c11;
  border-left: 14px solid transparent;
}

div.con {
  display: inline-block;
  position: relative;
}

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

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

Answer 3

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

这是另一种选择，使用transform: skew()和伪元素

它适用于所有背景，具有简单且易于更改的代码，并且在涉及不同input宽度/高度时也非常动态。

div {
  padding:30px;
  background-color:#c11;
  background: linear-gradient(to right, darkred, #c11);
}
input {
  display:block;
  background-color:#fff;
  border:0;
  height:30px;
  width:300px;
  padding:3px 0px;
  outline: none;
}

div:nth-child(2) input {
  width: 400px;
  height:40px;
  font-size: 25px;
}

/* cut corners */
span {
  position: relative;
  display: inline-block;
  padding: 0 15px;
  overflow: hidden;
}
span::before,
span::after {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 15px; bottom: 0;
  background-color: white;
  transform: skewY(45deg);
  transform-origin: right top;
}
span::after {
  left: auto; right: 0; 
  transform-origin: left top;
}

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

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