Pure CSS shapes
This is a work in progress. New shapes will may be added from time to time. Dissect the page source to see construction methods and comments.
Fig 1. Archery target.
Fig 2. RAF roundel – Keith Moon in memoriam.
Fig 3. This must be the easiest way to add 2 borders to a square or a rectangle. For the block must have 90 deg angles as the outline itself always strives to achieve that. And one more thing: An outline does not take up space in the flow of the document so some sort of buffer may prove necessary around the element.
Fig 4. Ribbon. A clever use of borders and a pseudo-element. Whoever came up with that?
Fig 5. Envelope. This one is really nothing but an elaboration on an alternative to the ribbon above. And I know who came up with the alternative; Zoe Rooney. The methods used are more or less the same. The tweak done by yours truly is to change properties and values around to make it look like an envelope. Although Rooney might still call it a flag. And there’s an idea: CSS shapes lend themselves beautifully to flags. I leave it to your imagination.