質問: HTML/CSSでフレックスボックスやグリッドなど 要素の配置についてなのですが これらは長辺、短辺がそれぞれ平行な要素 (例えば長方形など)を きれいに並べる例はたくさん見るのですが 画像のような複雑な図形を画像のように 並べることはできるのでしょうか。
回答: 他の方が、transformやgradientの方法を言われていますが、質問者さんの言われている事は、あくまでflaxboxのようなイメージなのだと思います。 こんなイメージですよね? →https://www.erikjo.com/work 画像というのは、例えばpngでひし形や台形を作っても、透明部分が「無い」わけじゃなくって、透明なだけで範囲としてはあって、あくまで画像は縦横が四角です。 ひし形や台形のように見えても、透明なだけです。 だから、普通は提示された画像のように敷き詰めることは出来ません。 ただ、cssにはpositionというのがあって、親要素に対して、子要素を自由に配置できます。 提示された画像のように複雑な図形をパズルのように組み合わせられなくはないです。 ただ、そんなことをするぐらいなら、提示された画像の全てを画像で作った方が良いです。 positionを使ってpx単位で並べる手間を考えると現実的じゃないというか...CSS等で並べる意味がないと思います。