Как вы делаете :: после части CSS Пентагон отзывчивым?

Question

Я создал форму, которая реагирует, но я не могу получить элементы: before и: after, которые делают полигон отзывчивым. Я хочу сделать так, чтобы верхний и нижний треугольники изменяли размеры вместе с формой.

Как бы это исправить? кодовое перо: https://codepen.io/coolblow/pen/rKEOEa

.form{
  flex:1;

}
form {
  background-color: lightgreen;
  margin: -10px auto;
  padding: 20px;
  width: 50%;
 position: relative;
}

form::before {
  content: '';
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent; 
  border-right: 20px solid transparent; 
  border-bottom: 20px solid red;
  position: absolute;
  top: -20px;
  left: 50%;
  margin-left: -20px;
}

form::after {
  content: '';
  width: 0; 
  height: 0;
  border-left: 120px solid transparent; 
  border-right: 120px solid transparent; 
  border-top: 70px solid blue;
  position: absolute;
  bottom: -70px;
  left: 0;
}

Answer 1

Используйте фон для создания всей фигуры:

form {
  padding: 50px 20px;
  margin:20px;
  width:50%;
  height:200px;
  background:
    /*Top part*/
    linear-gradient(to bottom left,transparent 49%,green 50%)top right/50.5% 50px,
    linear-gradient(to bottom right,transparent 49%,green 50%)top left/50% 50px,
    /*middle part*/
    linear-gradient(green,green) center/100% calc(100% - 100px),
    /*bottom part*/
    linear-gradient(to top left,transparent 49%,green 50%)bottom right/50.5% 50px,
    linear-gradient(to top right,transparent 49%,green 50%)bottom left/50% 50px;  
  background-repeat:no-repeat;
}

<form>
</form>

Обновление

Если вы хотите, чтобы сверху был меньший треугольник, вы можете сделать это:

form {
  padding: 50px 20px;
  margin:20px;
  width:50%;
  height:200px;
  background:
    /*Top part*/
    linear-gradient(to bottom left,transparent 49%,green 50%)calc(50% + 25px) 0/50px 50px,
    linear-gradient(to bottom right,transparent 49%,green 50%)calc(50% - 25px) 0/50px 50px,
    /*middle part*/
    linear-gradient(green,green) center/100% calc(100% - 100px),
    /*bottom part*/
    linear-gradient(to top left,transparent 49%,green 50%)bottom right/50.5% 50px,
    linear-gradient(to top right,transparent 49%,green 50%)bottom left/50% 50px;  
  background-repeat:no-repeat;
}

<form>
</form>

А для большего контроля вы можете использовать переменные CSS для настройки размеров:

form {
  margin:20px;
  width:50%;
  height:120px;
  --tw:50px; /*Top triangle*/
  --bw:50px; /*Bottom triangle*/
  padding: var(--tw) 20px var(--bw);
  background:
    /*Top part*/
    linear-gradient(to bottom left,transparent 49%,green 50%)calc(50% + var(--tw)/2) 0/var(--tw) var(--tw),
    linear-gradient(to bottom right,transparent 49%,green 50%)calc(50% - var(--tw)/2) 0/var(--tw) var(--tw),
    /*middle part*/
    linear-gradient(green,green) 50% var(--tw)/100% calc(100% - (var(--tw) + var(--bw))),
    /*bottom part*/
    linear-gradient(to top left,transparent 49%,green 50%)bottom right/50.5% var(--bw),
    linear-gradient(to top right,transparent 49%,green 50%)bottom left/50% var(--bw);  
  background-repeat:no-repeat;
}

<form>
</form>

<form style="--tw:80px;--bw:60px;">
</form>

<form style="--tw:120px;--bw:120px;">
</form>