css - 如何获得不规则、可扩展的 CSS 多边形

Question

那么我如何得到这个形状 使用 CSS？

我遇到了两个问题:

1. 使用 3D 变换，将原点设置在左侧中心，我可以使用 rotateY，但这会给我一个与多边形不平行的底部，尽管它的宽度为:100%，但不会填充屏幕水平...

2. 使用 skewY 以及 overflow hidden 的父容器，可以获得相同的效果，但后来我在更改分辨率时遇到缩放问题......太大，边变得非常高/短，太窄了，两边看起来几乎一样……

Answer 1

如果你只想创建不规则形状，SVG 将是更好的选择。 你可以试试 :before & :after Elements。