Creating simple fixed-size CSS shapes like circles, triangles, and squares is very straightforward. New properties, like border-radius and transform allow creation of a whole array of CSS-only shapes that previously required images. Even though responsiveness adds a level of complexity, all basic shapes require only one div, making them more convenient than SVG vector shapes.
Responsive CSS shapes scale without losing their aspect ratio. They are traditionally achieved in the web using images or Javascript. However, there is a very simple way to create shapes compatible with all major browsers (yes, IE7 too) using CSS only. This article aims to serve as a reference for the creation of basic responsive CSS shapes. It's a review of my three articles on CSS circles/ovals, CSS triangles and CSS squares/rectangles.