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

更好的方法是使用边框

It will support every browser.

见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 并编辑它们的边框。这样您的搜索...占位符就不会越界，您可以在结束范围之前添加一个按钮作为搜索图标。

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

Answer 4

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

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

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>

CSS 3：（文本）输入元素的透明方形切角怎么办？

CSS 3: Transparent square-cut corner of (text) input element how to?

html

css

transparent