Blog

clip-path, mask and shape-outside: Clipping, Masking and Flowing Text Around Shapes

clip-path paints only the inside of a shape and also does hit testing against it, mask-image gives partial visibility through an image's alpha channel, and shape-outside flows the text around a floated element along a shape; none of them changes the box in the layout. The post measures shape() against path(), a masked icon in forced colors, and a round author photo, a cover strip with faded edges and text flowing around a tilted book in Bookstore.