Пытаюсь вырезать буквы в 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;
}
Вырез буквы N и M -
Ответ
Псевдоэлементы спешат на помощь!
body {
background: url("https://images.unsplash.com/photo-1529926279675-c72f1da4eb2a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=86eceef4b033a911a312516dc81ccc58&auto=format&fit=crop&w=1041&q=80");
background-size: cover;
}
.line-trans {
position: absolute;
height: 20px;
left: 5%;
top: 3px;
transform: rotate(-47deg);
}
.line-trans img {
width: 316px;
height: 17px;
}
.education-feedback {
padding: 10px 0;
position: relative;
}
.form_feedback {
position: relative;
width: 500px;
height: 300px;
background-color: #fff;
margin: 100px auto;
text-align: center;
padding: 0 0 30px 0;
}
.form_feedback::before {
content: "";
position: absolute;
top: -50px;
left: 0;
border-left: 26px solid transparent;
border-right: 20px solid transparent;
border-bottom: 50px solid white;
}
.form_feedback::after {
content: "";
position: absolute;
top: -80px;
left: 0;
border-left: 26px solid white;
border-bottom: 50px solid transparent;
}
.angle:first-child {
position: absolute;
top: -80px;
right: 0;
background-color: white;
width: calc(100% - 85px);
height: 80px;
}
.angle:first-child::before {
content: "";
position: absolute;
top: 0;
left: -15px;
background-color: white;
width: 30px;
height: inherit;
transform: skew(-20deg);
}
.angle:first-child::after {
content: "";
position: absolute;
left: -60px;
border-left: 26px solid transparent;
border-right: 20px solid transparent;
border-top: 50px solid white;
height: inherit;
}
.angle:last-child {
position: absolute;
bottom: -80px;
left: 0;
background-color: white;
width: calc(100% - 85px);
height: 80px;
}
.angle:last-child::before {
content: "";
position: absolute;
top: 0;
right: -15px;
background-color: white;
width: 30px;
height: inherit;
transform: skew(-20deg);
}
.angle:last-child::after {
content: "";
position: absolute;
top: 0;
right: -70px;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 45px solid white;
}
.triangle {
position: absolute;
top: 0;
right: -85px;
border-right: 13px solid white;
border-bottom: 40px solid transparent;
}
.triangle::before,
.triangle::after {
content: "";
position: absolute;
}
.triangle::before {
top: 30px;
left: -14px;
border-left: 13px solid transparent;
border-right: 13px solid transparent;
border-bottom: 30px solid white;
}
.triangle::after {
border-left: 17px solid transparent;
border-right: 17px solid transparent;
border-bottom: 50px solid white;
top: 30px;
left: -59px;
}
.add {
position: absolute;
top: 60px;
right: -84px;
width: 20px;
height: 20px;
background-color: white;
}
.add::before {
content: "";
position: absolute;
left: -10px;
background-color: inherit;
width: inherit;
height: inherit;
transform: skew(-23deg);
}
.add::after {
content: "";
position: absolute;
left: -28px;
bottom: 0;
background-color: inherit;
width: inherit;
height: 6px;
}
.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;
}
.form_feedback input {
display: block;
margin: 50px auto;
height: 50px;
width: 300px;
border: 1px solid #059805;
padding: 0 20px;
}
.form_feedback .btn-order {
position: relative;
background: linear-gradient(45deg, #059805 33%, #4dbd4d 66%, #1db11d);
color: #fff;
border: navajowhite;
padding: 15px 80px;
text-transform: uppercase;
font-weight: 600;
z-index: 1;
}
.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;
}
Комментариев нет:
Отправить комментарий