类似于＆＃34; border-corner-shape：bevel＆＃34;表格

Question

我需要实现这个设计：

到目前为止我有这个代码：

https://jsfiddle.net/jimmyadaro/zsfb3x7n/

＆＃13;

＆＃13;

input,
select,
textarea,
button {
  outline: none;
  border: none;
}
input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: none;
}
body {
  background: #f06757;
}
.myForm {
  position: relative;
  width: 100%;
  max-width: 500px;
}
.myForm form .semi {
  height: 10px;
  width: 20px;
  border-radius: 0 0 40px 40px;
  margin: 0px auto;
  border: 2px solid #fff;
  border-top: none;
  position: relative;
  background: #f06757;
  top: 12px;
}
form,
form * {
  font-size: 15px;
  color: white;
  font-weight: 300;
}
.myForm input::-webkit-input-placeholder {
  color: #FFFFFF;
  opacity: 1;
}
.myForm input:-moz-placeholder {
  color: #FFFFFF;
  opacity: 1;
}
.myForm input::-moz-placeholder {
  color: #FFFFFF;
  opacity: 1;
}
.myForm input:-ms-input-placeholder {
  color: #FFFFFF;
  opacity: 1;
}
.myForm textarea::-webkit-input-placeholder {
  color: #FFFFFF;
  opacity: 1;
}
.myForm textarea:-moz-placeholder {
  color: #FFFFFF;
  opacity: 1;
}
.myForm textarea::-moz-placeholder {
  color: #FFFFFF;
  opacity: 1;
}
.myForm textarea:-ms-input-placeholder {
  color: #FFFFFF;
  opacity: 1;
}
form .name {
  width: 100%;
  max-width: 464px;
  background: none;
  padding: 20px 15px;
  border-radius: 12px 12px 0 0;
  border: 2px solid white;
}
div.together > * {
  display: inline-block !important;
  vertical-align: middle;
}
form .email {
  display: inline;
  width: 43.2%;
  margin-top: -2px;
  background: none;
  padding: 20px 15px;
  border: 2px solid white;
}
form .phone {
  display: inline;
  width: 43.2%;
  margin-top: -2px;
  background: none;
  padding: 20px 15px;
  border: 2px solid white;
  margin-left: -6px;
}
form .message {
  width: 100%;
  max-width: 464px;
  height: 200px;
  margin-top: -2px;
  background: none;
  padding: 20px 15px;
  border-radius: 0 0 12px 12px;
  border: 2px solid white;
  resize: none;
}
form .send {
  position: relative;
  margin-top: -6px;
  background: #4f465a;
  width: 100%;
  border: 2px solid white;
  font-size: 30px;
  padding: 15px 0px;
  font-weight: 700;
  text-transform: uppercase;
  transform: rotate(3deg);
  transform-origin: 0 0;
}
form .send:hover * {
  cursor: pointer;
}
.semi_abajo {
  height: 10px;
  width: 20px;
  border-radius: 40px 40px 0 0;
  margin: 0px auto;
  border: 2px solid #fff;
  border-bottom: none;
  position: absolute;
  background: #f06757;
  bottom: -2px;
  /* border size */
  /* center the element */
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}

＆＃13;

<div class="myForm">
  <form>
    <div class="semi"></div>

    <input type="text" class="name" placeholder="Name *">

    <div class="together">
      <input type="text" class="email" placeholder="Email *">

      <input type="text" class="phone" placeholder="Phone number">
    </div>

    <textarea class="message" placeholder="Message *"></textarea>

    <button type="submit" class="send">Send this
      <div class="semi_abajo"></div>
    </button>

  </form>
</div>

<div style="height:30px"></div>

＆＃13;

＆＃13;

＆＃13;

它可能只有CSS吗？我应该使用图像吗？也许是SVG？

感谢阅读。