您如何使Pesduo元素具有响应性？

Question

我已经创建了一个响应式表单，但是我无法获取：before和：after元素，这使其看起来像一个要响应的多边形。我要制作它，以便顶部和底部三角形随表格一起调整大小。

我已经创建了一个响应式表单，但是我无法获取：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;

}