CSS Diagonal border input fields

Question

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?

A quick Google search whipped this up: https://www.viget.com/articles/angled-edges-with-css-masks-and-transforms Please do your own research first before asking Stackoverflow — Jesse, Oct 26 '17 at 08:29

score 3 · Answer 1 · answered Oct 26 '17 at 08:48

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>

score 3 · Accepted Answer · answered Oct 26 '17 at 09:06

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>

score 0 · Answer 3 · answered Oct 26 '17 at 08:52

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>

CSS Diagonal border input fields

3 Answers3