Сделать вырез на css

#css #clip_path

Пытаюсь вырезать буквы в 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 - 


    

Ответы

Ответ 1

Псевдоэлементы спешат на помощь! 



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;
}

  

  

    

    

      
    

    

      
    

    

      
    
    

    

      

      

    
  



Ответ 2

clip-path можно совмещать с calc. Надо просто задать все величины фиксированными
(т. е. не в процентах), а для нижнего края при помощи calc вычесть их из 100%.

Буква W вверху слева:

clip-path: polygon(1em 1em, 2.5em 1em, 3.5em 4em, 4.5em 1em, 5.5em 1em, 6.5em 4em,
7.5em 1em, 9em 1em, 7em 7em, 6em 7em, 5em 4em, 4em 7em, 3em 7em, 1em 1em);


Буква M внизу справа получается из неё лёгким преобразованием



console.log(
  "1em 1em, 2.5em 1em, 3.5em 4em, 4.5em 1em, 5.5em 1em, 6.5em 4em, 7.5em 1em, 9em
1em, 7em 7em, 6em 7em, 5em 4em, 4em 7em, 3em 7em, 1em 1em"
  .replace(/([^ ,]+)(,?)/g, "calc(100% - $1)$2")
)




Это всё вставляется в clip-path и дополняется прямоугольником и парой точек:



body {
  background: linear-gradient(to bottom, blue, red);
}

div {
  padding: 1em 10em;
  background: black;
  color: white;
  text-align: justify;
  text-align-last: justify;

  clip-path: polygon(
    0 0,
    1em 1em, 2.5em 1em, 3.5em 4em, 4.5em 1em, 5.5em 1em, 6.5em 4em, 7.5em 1em, 9em
1em, 7em 7em, 6em 7em, 5em 4em, 4em 7em, 3em 7em, 1em 1em,
    0 0,
    calc(100% - 1em) calc(100% - 1em), calc(100% - 2.5em) calc(100% - 1em), calc(100%
- 3.5em) calc(100% - 4em), calc(100% - 4.5em) calc(100% - 1em), calc(100% - 5.5em)
calc(100% - 1em), calc(100% - 6.5em) calc(100% - 4em), calc(100% - 7.5em) calc(100%
- 1em), calc(100% - 9em) calc(100% - 1em), calc(100% - 7em) calc(100% - 7em), calc(100%
- 6em) calc(100% - 7em), calc(100% - 5em) calc(100% - 4em), calc(100% - 4em) calc(100%
- 7em), calc(100% - 3em) calc(100% - 7em), calc(100% - 1em) calc(100% - 1em),
    0 0, 0 100%, 100% 100%, 100% 0, 0 0
  );
}

Пытаюсь вырезать буквы в div на чистом CSS, использую — clip-path, но полностью вырезать
не получается
Пытаюсь вырезать буквы в div на чистом CSS, использую — clip-path, но полностью вырезать
не получается
Пытаюсь вырезать буквы в div на чистом CSS, использую — clip-path, но полностью вырезать
не получается