These are my own solutions from CSS Battle. All CSS — no SVG and no images. For more shapes, see The Shapes of CSS. Some shapes here use position: absolute and others use only margin. (Note: No need for the z-index property. The order determines overlap.)
This was fun because I have rarely made any CSS shapes — aside from simple boxes and circles. There’s a blog post about how you can reduce the character counts extremely by using various CSS tricks, but my examples here do not use any of those tricks.
All CSS shapes here coded by Mindy McAdams in 2019.