html - 你如何使::在 css pentagon 的一部分响应之后？

Question

我创建了一个响应式表单，但我无法获得 :before 和 :after 元素，这使它看起来像一个响应式多边形。我想使顶部和底部的三 Angular 形随表格一起调整大小。

我该如何解决这个问题？码笔: 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>

更新

如果你想要顶部的小三 Angular 形，你可以这样做:

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>