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

Question

For a project I have to cut of the edge of (various) input elements as this is part of the website design. As the background may vary on different screen sizes the edges must be cut transparently that means that you must see the background of the below element where 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>

However I do not know how to do this square-cut. Do you know a way?

Answer 1

Easiest way is to add a div on each end and edit their borders. This way your search... placeholder isn't over the line, and you can add a button before then ending span to be a search icon.

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