CSS Shapes
CSS shapes allow text to flow around non-rectangular blocks.
CSS Shapes are useful when an image is not square (or if you don't want a square image to look square). There are basic shapes (such as circle) that can be applied, complex polygons, or even shaped transparency threshold masks.
In this first example, a square image is made to look like a "D" by giving it two rounded corners (via border-radius in the CSS). Text flows smoothly around it thanks to the shape-outside property which is set to be a circle.
The size of the image is set to be 50% of the width or height of the viewport (whichever is the smaller) via vmin.
The second example uses a polygon to define the shape of the edge of the teapot - this is quite a lot of work but very accurate on an iregular shape.
The third example takes advantage of the shape-image-threshold property. When we first created this example it worked perfectly on Firefox but Chrome wasnt't happy with it. A useful tool for checking the support for features is CanIUse.com. Remember, when writing for the web, it's best to assume something will not work, and create a site that works well by default, and which is then progressively enhanced as the viewer's browser supports different feaures.
Happily all major browsers (Chrome, Firefox, Safari & Edge) now support this feature.
The remainder of the text on this page is lorem ipsum so there is enough text to show flow ... dolor sit amet consectetur, adipisicing elit. Fugit a aperiam nobis, vel officiis nihil impedit nulla amet porro velit ipsum reprehenderit quo, delectus veniam excepturi voluptas commodi hic et similique iure laborum molestias nam quam. Totam amet, quibusdam eius a hic veritatis! Sit laboriosam harum sapiente maxime consectetur ea et inventore officia ducimus nesciunt, eius fugiat provident rerum similique, numquam distinctio amet. Unde ipsam possimus tenetur? Dolores, illum, ipsa animi quia ex cupiditate veniam eligendi sunt asperiores laboriosam saepe est. Ad labore consequatur maxime maiores recusandae, optio hic quaerat aspernatur ex nulla laboriosam harum tenetur impedit, quidem sapiente sit.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit a aperiam nobis, vel officiis nihil impedit nulla amet porro velit ipsum reprehenderit quo, delectus veniam excepturi voluptas commodi hic et similique iure laborum molestias nam quam. Totam amet, quibusdam eius a hic veritatis! Sit laboriosam harum sapiente maxime consectetur ea et inventore officia ducimus nesciunt, eius fugiat provident rerum similique, numquam distinctio amet. Unde ipsam possimus tenetur? Dolores, illum, ipsa animi quia ex cupiditate veniam eligendi sunt asperiores laboriosam saepe est. Ad labore consequatur maxime maiores recusandae, optio hic quaerat aspernatur ex nulla laboriosam harum tenetur impedit, quidem sapiente sit.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit a aperiam nobis, vel officiis nihil impedit nulla amet porro velit ipsum reprehenderit quo, delectus veniam excepturi voluptas commodi hic et similique iure laborum molestias nam quam. Totam amet, quibusdam eius a hic veritatis! Sit laboriosam harum sapiente maxime consectetur ea et inventore officia ducimus nesciunt, eius fugiat provident rerum similique, numquam distinctio amet. Unde ipsam possimus tenetur? Dolores, illum, ipsa animi quia ex cupiditate veniam eligendi sunt asperiores laboriosam saepe est. Ad labore consequatur maxime maiores recusandae, optio hic quaerat aspernatur ex nulla laboriosam harum tenetur impedit, quidem sapiente sit.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit a aperiam nobis, vel officiis nihil impedit nulla amet porro velit ipsum reprehenderit quo, delectus veniam excepturi voluptas commodi hic et similique iure laborum molestias nam quam. Totam amet, quibusdam eius a hic veritatis! Sit laboriosam harum sapiente maxime consectetur ea et inventore officia ducimus nesciunt, eius fugiat provident rerum similique, numquam distinctio amet. Unde ipsam possimus tenetur? Dolores, illum, ipsa animi quia ex cupiditate veniam eligendi sunt asperiores laboriosam saepe est. Ad labore consequatur maxime maiores recusandae, optio hic quaerat aspernatur ex nulla laboriosam harum tenetur impedit, quidem sapiente sit.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit a aperiam nobis, vel officiis nihil impedit nulla amet porro velit ipsum reprehenderit quo, delectus veniam excepturi voluptas commodi hic et similique iure laborum molestias nam quam. Totam amet, quibusdam eius a hic veritatis! Sit laboriosam harum sapiente maxime consectetur ea et inventore officia ducimus nesciunt, eius fugiat provident rerum similique, numquam distinctio amet. Unde ipsam possimus tenetur? Dolores, illum, ipsa animi quia ex cupiditate veniam eligendi sunt asperiores laboriosam saepe est. Ad labore consequatur maxime maiores recusandae, optio hic quaerat aspernatur ex nulla laboriosam harum tenetur impedit, quidem sapiente sit.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit a aperiam nobis, vel officiis nihil impedit nulla amet porro velit ipsum reprehenderit quo, delectus veniam excepturi voluptas commodi hic et similique iure laborum molestias nam quam. Totam amet, quibusdam eius a hic veritatis! Sit laboriosam harum sapiente maxime consectetur ea et inventore officia ducimus nesciunt, eius fugiat provident rerum similique, numquam distinctio amet. Unde ipsam possimus tenetur? Dolores, illum, ipsa animi quia ex cupiditate veniam eligendi sunt asperiores laboriosam saepe est. Ad ok so it's not all lorem ipsum. Lorem easter eggs are good to find labore consequatur maxime maiores recusandae, optio hic quaerat aspernatur ex nulla laboriosam harum tenetur impedit, quidem sapiente sit.