CSS vs. SVG: Shapes and Arbitrarily-Shaped UI Components

In the first two articles of this series, we compared CSS and SVG techniques for creating graphical text effects and ways to style (and animate) HTML checkboxes and radio buttons, respectively. In this article, we are going to go over techniques for creating arbitrarily-shaped UI components using CSS properties and SVG’s capabilities, and a mix of both! Specifically, we will be talking about how to create circular menus, as these are the perfect example of usable non-rectangular UI elements. Let’s dig in. We’ll start with an overview of what CSS is capable and incapable of in terms of creating (Read more...)