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

Question

For the project, I need to cut out the edge of the (various) input elements, as this is part of the website design. Since the background may vary in different sizes of the screen, the edges should be cut transparently, which means that you should see the background of the bottom element in which the edge is cut.

This is what I have to achieve:

With rounded corners, I would do the following:

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>

Run codeHide result

However, I do not know how to do this. Do you know a way?

Answer 1

- div . , ... placeholder , , , .

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

Hide result

Answer 2

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

Hide result

Answer 3

.

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

Hide result

Answer 4

Here is another option using transform: skew()pseudo-elements

It works on all backgrounds, has simple and easy-to-modify code, and is pretty dynamic when it comes to different inputwidth / 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>

Run codeHide result