Web Programming with HTML5, CSS, and JavaScript

12.8 Umbrella Web Page

As stated earlier, you can form a path with straight or curved lines. In the previous section, we used only straight lines for our path examples. In this section, we use both types of lines.

Single-Path Simple Umbrella

Let’s jump right into an example. See FIGURE 12.7’s Simple Umbrella web page. The umbrella is very basic because for now, we’re trying to keep the focus on path details and not get bogged down in presentation details.

FIGURE 12.7 Simple Umbrella web page

In the figure, you can see two shapes—the semicircle for the umbrella’s canopy and the vertical line for the umbrella’s shaft. Because the shapes ...