css - 使用 CSS 曲线

Question

我正在构建基础 Set卡片图案。我可以做颜色、数字和填充物，而且我有菱形和椭圆形。请在this fiddle中查看我的进度.

拼图的最后一 block 是为“squiggle”形状构建一个 squiggle 类。如何使用 CSS 制作波浪形？

Answer 1

我很确定您将不得不求助于 SVG 来获得这样的形状。

对于其他形状，SVG 也可能会让您的生活更轻松。在我的 Safari 6.0.2 上，我看到一些小的 CSS 渲染工件:

特别是，由于 transform 的工作方式(纹理映射)，条纹菱形的间距会产生一些看起来不太均匀的东西。您需要放大此屏幕截图以查看钻石 Angular 处的人工制品。

基本上，CSS 不适用于绘制形状。 SVG 用于绘制形状。因此，由于您正在尝试绘制形状，因此使用 SVG 成功的可能性要大得多。

不过钻石做得不错。 (另请注意，SVG 应该在不支持 CSS3 3D 的平台上工作；倾斜/缩放正方形以制作菱形是一个巧妙的技巧，但归根结底，它或多或少是一种黑客行为)