console
<div class="form">
<div class="username">
<input type="text" placeholder="USERNAME"/>
</div>
<div class="password">
<input type="password" placeholder="PASSWORD"/>
</div>
<div class="login">
<span>log in</span>
</div>
</div>
* { box-sizing: border-box }
.form {
height: 18.75em;
width: 25em;
background: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-transform: uppercase;
font-family: "Bebas Neue", Arial;
color: #fff;
}
.form > div {
height: 6.25em;
width: 100%;
}
.username {
background-color: #4daf7c;
}
.username::after {
content: "";
width: 0px;
height: 0px;
position: absolute;
border-style: solid;
border-width: 0.5em 0.469em 0 0.469em;
border-color: #4daf7c transparent transparent transparent;
top: 6.25em;
left: 50%;
margin-left: -0.496em;
}
.password {
background-color: #404241;
}
.password::after {
content: "";
width: 0px;
height: 0px;
position: absolute;
border-style: solid;
border-width: 0.5em 0.469em 0 0.469em;
border-color: #404241 transparent transparent transparent;
top: 12.5em;
left: 50%;
margin-left: -0.496em;
}
.login {
background-color: #e9c85d;
display: table;
}
.login span {
display: table-cell;
vertical-align: middle;
text-align: center;
font-size:3em;
cursor: pointer;
}
input {
height: 1.25em;
width: 8.125em;
font-size: 2em;
text-align:center;
border: 0;
outline: 0;
color: #fff;
background: transparent;
border:0.033em #fff solid;
margin-left: 2.1875em;
margin-top: 1em;
font-family: "Bebas Neue", Arial;
}