css - 使用 CSS 绘制曲线

Question

我正在构建基本的套装卡片模式。我可以做颜色、数字和填充物，我有菱形和椭圆形。请看我在这个小提琴中的进展。

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

Answer 1

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

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

特别是，由于transform工作方式（纹理映射）导致的条纹菱形的间距会产生看起来不太均匀的东西。您需要放大此屏幕截图以查看钻石角落处的伪影。

基本上，CSS 不适合绘制形状。SVG 用于绘制形状。因此，由于您正在尝试绘制形状，因此您使用 SVG 成功的机会要高得多。

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