MoreLesson 245Free preview

Shapes

This lesson is part of How To · All levels

Summary

CSS can form circles, triangles, ellipses, and polygons without image files. Circles use border-radius: 50%, triangles use transparent border, and free shapes are made with clip-paths. Decorative forms should not carry important information alone so that it remains understandable to all users.

Key points

Border-radius: 50% on a square element produces a circle; on a rectangle produces an ellipse.
Triangles are made of boundaries with zero element dimensions.
Clip-path: polygon(...) cut elements following the coordinate point.
The aspect ratio helps to maintain the proportions of the shape as the size changes.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.