CSS Diagonal border input fields [duplicate] - html

Question

This question already has answers here:
Shape with a slanted side (responsive)
(3 answers)
Closed 5 years ago.
I'm trying to create the following form with the input fields having a diagonal side so they fit nicely together, see image below for more accurate description.
However i'm unable to achieve this as i have no idea on how to do this. I tried with transparant borders but without succes.
Anyone an idea on how to do this?

Answer 1

I love Ilya's skew solution. Super creative.
Here's an option using some :after pseudo-elements and CSS triangles to create the skewed effect. To achieve the desired effect we add :after pseudo elements to the right-side of the left inputs, and to the left-side of the right input/button.
Here's the end effect:
.container {
display: flex;
flex-direction: column;
background-color: #565452;
padding: 20px;
}
.row {
display: flex;
}
.row:not(:last-child) {
margin-bottom: 60px;
}
.field {
width: calc(100% - 10px);
position: relative;
background-color: #565452;
}
.field:first-child {
margin-right: 30px;
}
.field:after {
content: "";
display: block;
position: absolute;
top: 0;
width: 0px;
height: 0px;
}
.field:first-child:after {
right: -15px;
border-top: 60px solid #ffffff;
border-right: 15px solid transparent;
}
.field:last-child:after {
left: -15px;
border-bottom: 60px solid #ffffff;
border-left: 15px solid transparent;
}
.field.field--button {
flex-basis: 25%;
}
.field.field--button:after {
border-bottom: 60px solid #F9D838;
}
.input {
border: none;
line-height: 60px;
outline: none;
padding: 0 15px;
width: 100%;
box-sizing: border-box;
background-color: #ffffff;
font-size: 18px;
}
.input::placeholder {
color: #cccccc;
}
.button {
background-color: #F9D838;
color: #ffffff;
border: none;
outline: none;
line-height: 60px;
font-size: 30px;
width: 100%;
padding: 0 30px 0 20px;
text-transform: uppercase;
}
<form>
<div class="container">
<div class="row">
<div class="field">
<input class="input" placeholder="Voornaa m" />
</div>
<div class="field">
<input class="input" placeholder="Achternaa m" />
</div>
</div>
<div class="row">
<div class="field">
<input class="input" placeholder="E-mail" />
</div>
<div class="field field--button">
<button class="button" type="submit">Go</button>
</div>
</div>
</div>
</form>

Answer 2

You can apply transform: skewX for the container, "undo" it (by applying the same transform, but with the opposite sign of the angle) for the items, and hide the outer corners with overflow:hidden of the outer container, like this:
form {
margin: 20px;
overflow: hidden;
width: 350px;
}
.row {
display: flex;
transform: skewX(-15deg);
margin: 0 -5px;
}
.cell {
display: flex;
margin: 0 3px;
overflow: hidden;
}
.wide {
flex: 1;
}
.cell > * {
transform: skewX(15deg);
margin: 0 -5px;
border: none;
flex: 1;
}
input {
padding: 4px 5px 4px 15px;
background: yellow;
}
button {
padding: 4px 25px 4px 20px;
background: pink;
}
<form class="outer-container">
<div class="row">
<div class="cell wide"><input placeholder="enter something"></div>
<div class="cell"><button>Press me</button></div>
</div>
</form>

Answer 3

I'd add a seperate span element to the end and then use border-bottom/top/left/right and set them to the color that you need.
Something like this: http://jsfiddle.net/delnolan/3jbtf9f1/
<style>
.angled-input{
border: none;
height: 50px;
float: left;
display:block;
}
input:focus{
outline: none;
}
.add-angle{
display: block;
float:left;
border-right:30px solid transparent;
border-bottom: 50px solid #ffffff;
}
</style>
<form>
<input class="angled-input"/><span class="add-angle"></span>
</form>