Пытаюсь вырезать буквы в div
на чистом CSS
, использую — clip-path
, но полностью вырезать не получается.
body {
background: #262626;
}
.education-feedback {
padding: 100px 0;
background-image: url('../img/back-bot.jpeg');
background-size: cover;
background-position: 10%;
position: relative;
}
.line-trans {
position: absolute;
height: 20px;
left: 5%;
top: 3px;
transform: rotate(-47deg);
}
.line-trans img {
width: 316px;
height: 17px;
}
.form_feedback {
width: 500px;
background-color: #fff;
margin: 100px auto;
text-align: center;
padding: 50px 0;
clip-path: polygon(21% 31%, 10% 5%, 0 40%, 0 100%, 20% 100%, 48% 100%, 100% 100%, 100% 80%, 100% 42%, 100% 0, 80% 0%, 31% 0);
}
.form_feedback input {
display: block;
margin: 50px auto;
height: 50px;
width: 300px;
border: 1px solid #059805;
padding: 0 20px;
}
.form_feedback .btn-order {
background: linear-gradient(45deg, #059805 33%, #4dbd4d 66%, #1db11d);
color: #fff;
border: navajowhite;
padding: 15px 80px;
text-transform: uppercase;
font-weight: 600;
}
.name_feddback {
position: relative;
}
.name_feddback img {
position: absolute;
right: 22%;
bottom: 6px;
}
.phone_feedback {
position: relative;
}
.phone_feedback img {
position: absolute;
right: 22%;
bottom: 6px;
}
.email_feedback {
position: relative;
}
.email_feedback img {
position: absolute;
right: 22%;
bottom: 12px;
}
<div class="education-feedback">
<div class="line-trans"><img src="img/line.png"></div>
<div class="form_feedback">
<div class="name_feddback">
<input type="" name="" placeholder="Имя">
</div>
<div class="phone_feedback">
<input type="" name="" placeholder="Телефон">
</div>
<div class="email_feedback">
<input type="" name="" placeholder="E-mail">
</div>
<p><button class="btn-order">Заказать курс</button></p>
</div>
</div>
Вырез буквы N и M -