Skip to main content
Workforce LibreTexts

5.2 CSS Shapes Introduction

  • Page ID
    26497
    \( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \) \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)\(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\) \(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\)\(\newcommand{\AA}{\unicode[.8,0]{x212B}}\)

    CSS Shapes Introduction

    Whenever we create an object in HTML, by default, that object is some kind of rectangle. The image below shows this in detail. Notice how the text wraps itself around the Moon in a square shape.

    shapes_no_wrap@0.5x.png

    For years, printed media could curved text around a round image or graphic like the second photo you see. See how much more elegant this is?

    shapes_with_wrap@0.5x.png

    Lucky for us, Web development has finally caught up with the printed graphics technique in the past few years by implementing CSS3 Shapes.1 Click the HTML page below and then hover over the flower for an idea of how this could be useful. See how the text accentuates the motion of the flower?

    On the next page, we'll discuss the syntax that will make this happen.


    Footnotes

    1. “‘CSS Shapes’: Can I Use... Support Tables for HTML5, CSS3, Etc.” "CSS Shapes" | Can I Use... Support Tables for HTML5, CSS3, Etc, CanIUse.com, https://caniuse.com/?search=css+shapes.


    This page titled 5.2 CSS Shapes Introduction is shared under a CC BY-NC license and was authored, remixed, and/or curated by Rosemary Barker.

    • Was this article helpful?