A different method involves utilizing CSS-transforms. You can find a detailed explanation of the main concept in Creating an elongated hexagon shaped button with just one element.
To implement box-shadow, you have the option to apply it directly to .rhombus:before and :after (although some issues may arise in Mozilla), or you can create another container with offsets and duplicates of those pseudo-elements.
form {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 30px 20px;
border: none;
font-family: sans-serif;
}
form .header {
flex-basis: 100%;
margin: -10px 0 10px;
text-align: center;
color: white;
}
form input,
form button {
flex-grow: 1;
height: 30px;
margin: 0 5px;
padding: 0 5px;
box-sizing: border-box;
}
form button[type="submit"] {
background-color: #FFD900;
}
.rhombus {
position: relative;
-webkit-perspective: 800px;
perspective: 800px;
}
.rhombus:before,
.rhombus:after {
content: "";
position: absolute;
left: 0;
height: 50%;
width: 100%;
background-color: #1E9BAF;
z-index: -1;
}
.rhombus:before {
top: 0;
-webkit-transform: rotateX(30deg);
-webkit-transform-origin: center bottom;
-ms-transform: rotateX(30deg);
-ms-transform-origin: center bottom;
transform: rotateX(30deg);
transform-origin: center bottom;
/*box-shadow: 3px 5px #DDD;*/
}
.rhombus:after {
bottom: 0;
-webkit-transform: rotateX(-30deg);
-webkit-transform-origin: center top;
-ms-transform: rotateX(-30deg);
-ms-transform-origin: center top;
transform: rotateX(-30deg);
transform-origin: center top;
/*box-shadow: 5px 5px #DDD;*/
}
<form class="rhombus">
<div class="header">SUBMIT REQUEST</div>
<input name="name" placeholder="Your name"/>
<input name="phone" placeholder="Your phone number"/>
<button type="submit">SEND</button>
</form>