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.