css - CSS を使用した波線

Question

基本的なセットカード パターンを構築しています。色、数字、塗りつぶしができ、ひし形と楕円形があります。この fiddleで私の進行状況を確認してください。

パズルの最後のピースはsquiggle、"くねった" 形状のクラスを作成することです。CSS を使用してくねった形状を行うにはどうすればよいですか?

Answer 1

そのような形状については、SVG に頼る必要があると確信しています。

SVG は、これらの他の形状についてもあなたの生活を楽にするかもしれません。私の Safari 6.0.2 では、小さな CSS レンダリング アーティファクトがいくつか見られます。

特に、縞模様のひし形の間隔transform(テクスチャ マッピング) は、完全に均一に見えないものを生成します。ダイヤモンドの角にアーティファクトがあることを確認するには、このスクリーンショットを拡大する必要があります。

基本的に、CSS は図形を描画するためのものではありません。SVG は図形を描画するためのものです。したがって、図形を描画しようとしているので、SVG で成功する可能性がはるかに高くなります。

しかし、ダイヤモンドとの良い仕事。(また、SVG は CSS3 3D をサポートしていないプラットフォームでも動作するはずです。正方形を歪ませたり拡大縮小してダイヤモンドを作成するのは巧妙なトリックですが、結局のところ、多かれ少なかれハックです)