Срочно помогите

[ingvarrrr]

нужно сделать вырез как на картинке, ничего не могу придумать, помогите плз

https://codepen.io/ingvarrrrr/pen/qzyPpP

[klierik]

Здравствуйте.

Попробуйте начать с этого примера:

[AlexZaw]

04.07.2019 в 23:01, ingvarrrr сказал:

нужно сделать вырез как на картинке, ничего не могу придумать, помогите плз

не очень кроссбраузерный вариант:

<div class="wrap">
<form class="feedback_form">
  <p>Нужен срочный перевод контракта или делового письма? Переговоры с иностранными партнерами перенесли на сегодняшний вечер, а под рукой нет переводчика?
  </p>
  <h4>Решите задачу сейчас:</h4>
  <input type="text" name="name" id="name" placeholder="Введите имя:">
  <input type="text" name="phone" id="phone" placeholder="Введите телефон:">
  <input type="submit" class="red_button" value="нужен срочный перевод">
</form>
  </div>

.wrap{
  filter: drop-shadow(0 0 5px rgba(1, 2, 2, 0.5));
}
.feedback_form:before{
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 10px;
  background: #cb0e17;
  clip-path: polygon(0 0,45% 0px,50% 10px, 55% 0px, 100% 0)
}
.feedback_form {
  position: relative;
  width: 300px;
  min-height: 500px;
  margin-left: 55px;
  background-color: #fff;
  border: 1px solid #cb0e17;
  clip-path: polygon(0 0, 45% 0, 50% 10px, 55% 0, 100% 0, 100% 100%, 0 100%);
  padding: 1.2em;
  padding-top: 2.8em;
  display: flex;
  flex-direction: column;
  align-items: center;
}
 
p {
  font-size: 0.75em;
  font-family: "Roboto", sans-serif;
  color: rgb(51, 51, 51);
  line-height: 2;
  text-align: left;
}
h4 {
  font-size: 22px;
  font-family: "Roboto";
  color: rgb(203, 14, 22);
  line-height: 1.09;
  text-align: left;
  margin-top: 30px;
  margin-bottom: 35px;
}
 
input {
  width: 232px;
  height: 40px;
}
 
input[type="text"] {
  border: 1px solid rgb(1, 1, 1);
  border-radius: 2px;
  background-color: rgba(255, 255, 255, 0.231);
  opacity: 0.5;
}
 
input:first-of-type {
  margin-bottom: 10px;
}
 
input[type="submit"] {
  border: none;
  cursor: pointer;
 
  margin-top: 35px;
}
 
.red_button {
  border-radius: 2px;
  background-color: rgb(203, 14, 23);
  box-shadow: 0px 0px 5px 0px rgba(1, 1, 1, 0.75),
    inset 0px 0px 5px 0px rgba(255, 255, 255, 0.36);
  width: 230px;
  height: 41px;
 
  display: flex;
  justify-content: center;
  align-items: center;
 
  font-size: 15px;
  font-family: "Roboto", sans-serif;
  color: rgb(255, 255, 255);
  text-transform: uppercase;
  line-height: 2.399;
}
 
body{
  font-size: 20px;
}