CSS Shapes

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.

I have a habit of not using ::before and ::after.

I learned so much about border-radius.

Note: No need for the z-index property. The order determines overlap.