Question

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

我该如何解决？密码笔： https://codepen.io/coolblow/pen/rKEOEa

myDir = myDir + '\\CorrectFolder'

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>

如何使:: cs五角形零件的:: after响应？

1 个答案: